[Devlog] Cypress css testing issue

swingยท2021๋…„ 11์›” 19์ผ
1

[Devlog]

๋ชฉ๋ก ๋ณด๊ธฐ
1/7
post-thumbnail

๐Ÿ’ก Cypress testing ์ค‘ ๊ฒช์€ ์ด์Šˆ์— ๋Œ€ํ•ด์„œ ๊ณต์œ ํ•˜๊ณ ์ž ์ด ์•„ํ‹ฐํด์„ ์ž‘์„ฑํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.


Css color test

๋„ค๋น„๊ฒŒ์ดํ„ฐ์˜ ์•„์ดํ…œ์„ ํด๋ฆญํ–ˆ์„๋•Œ, ํ•ด๋‹น ์•„์ดํ…œ์˜ css ๋ณ€๊ฒฝ์„ ํ…Œ์ŠคํŒ… ํ•˜๋Š” ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
Cypress error code
-> ์ด ์ฝ”๋“œ๋Š”, ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ์—๋Ÿฌ ํ™”๋ฉด์„ ๋ณด๋ฉด,

-> ์ œ๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋Š”, css hex color code๋กœ value๋ฅผ ํ…Œ์ŠคํŒ…ํ•˜๋Š”๋ฐ, Cypress๋Š” rgba๋กœ value๋ฅผ ๋ฑ‰์–ด์„œ ๋ฐœ์ƒํ•˜๋Š” ์˜ค๋ฅ˜์˜€์Šต๋‹ˆ๋‹ค.
์ด๋Ÿฐ ์ด์œ ๋Š” Cypress ๊ณต์‹๋ฌธ์„œ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ๋Š”๋ฐ์š”,

-> Cypress์—์„œ ์‚ฌ์šฉํ•˜๋Š” assertion library์ธ chai๋Š”, Sinon๊ณผ JQuery๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘๋™ํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ผ๊ณ  ๋‚˜์™€์žˆ์Šต๋‹ˆ๋‹ค. JQuery๋Š” css action์— ๋Œ€ํ•ด rgba๋กœ๋งŒ ๊ฐ์ง€ํ•˜์—ฌ ์ƒ๊ธฐ๋Š” ๋ฌธ์ œ์˜€์Šต๋‹ˆ๋‹ค.
Cypress์ž์ฒด์—์„œ hex code์™€ rgba์— ๋Œ€ํ•ด ์ž๋™ ๋ณ€ํ™˜ํ•˜์—ฌ ํ…Œ์ŠคํŒ…์„ ์ง„ํ–‰ํ•ด์•ผ ํ•  ๊ฒƒ ๊ฐ™์ง€๋งŒ, ํ˜„์žฌ๋Š” ํ•ด๋‹น ์ด์Šˆ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” API๊ฐ€ ๋”ฐ๋กœ ์กด์žฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

-> ๊ฒฐ๊ตญ ์ €๋Š”, hex code๋ฅผ rgba๋กœ ์ปจ๋ฒ„ํŒ…ํ•˜๋Š” ์œ ํ‹ธ ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด์„œ ํ…Œ์ŠคํŒ…์„ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.


-> ์ด๋ ‡๊ฒŒ, rgba๋กœ ๋ณ€ํ™˜ํ•œ ํ›„ ํ…Œ์ŠคํŒ…์ด ์ •์ƒ์ ์œผ๋กœ ํ†ต๊ณผํ•˜๋Š” ๋ชจ์Šต์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


Cypress run โ†”๏ธ open ๊ฒฐ๊ณผ๊ฐ€ ๋‹ค๋ฅด๋‹ค?

Cypress์—์„œ ํ…Œ์ŠคํŒ…์„ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ CLIํ™˜๊ฒฝ์—์„œ ํ…Œ์ŠคํŒ…ํ•˜๋Š” Cypress run๊ณผ
์‹ค์ œ ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์—์„œ ํ…Œ์ŠคํŒ…ํ•˜๋Š” Cypress open์ด ์žˆ์Šต๋‹ˆ๋‹ค.
์‹ค์ œ CI/CDํ™˜๊ฒฝ์—์„œ๋Š” runํ™˜๊ฒฝ์—์„œ ํ…Œ์ŠคํŒ…์„ ์ง„ํ–‰ํ•˜๊ณ , ๋กœ์ปฌ ํ…Œ์ŠคํŒ…์€ ๋‘ ๊ฐ€์ง€๋ฅผ ๋ฒˆ๊ฐˆ์•„๋ฉด์„œ ํ…Œ์ŠคํŒ…ํ•˜๋˜ ์ƒํ™ฉ์—์„œ ์—๋Ÿฌ๋ฅผ ๋งž๋‹ฅ๋œจ๋ ธ์Šต๋‹ˆ๋‹ค.
run๊ณผ open์‹œ์— ํ…Œ์ŠคํŒ… ๊ฒฐ๊ณผ๊ฐ€ ๋‹ค๋ฅด๊ฒŒ ๋˜๋Š” ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.

run์„ ํ†ตํ•ด css background color testing์„ ํ•ฉ๋‹ˆ๋‹ค.

div๋ฅผ ํด๋ฆญํ•˜๋ฉด rgba(25, 118, 210, 0.08) ์ด ๋‚˜์™€์•ผ ํ•˜๋Š”๋ฐ ์ž๊พธ๋งŒ

rgba(25, 118, 210, 0.2) ๋ฅผ ๋ฑ‰๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

open์„ ํ†ตํ•ด tesing์„ ํ•˜๋ฉด ํ†ต๊ณผ๋˜๊ตฌ์š”,,

์•„๋‹ˆ, ์‹ฌ์ง€์–ด open๋„ ์ฒ˜์Œ ๋ช…๋ น์–ด ์‹คํ–‰ ํ›„์—๋Š” ์—๋Ÿฌ๊ฐ€ ํ„ฐ์ง€๊ณ , watch๋ชจ๋“œ๋ฅผ ํ†ตํ•œ ๋ณ€๊ฒฝ์‚ฌํ•ญ์ด ์žˆ๋Š” ํ›„์— ํ…Œ์ŠคํŒ…์ด ์ง„ํ–‰๋˜๋ฉด ํ†ต๊ณผ๊ฐ€ ๋˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ฒฐ๊ตญ ์ฐพ๋‹ค๋ณด๋‹ˆ, ์›๋ž˜ ๊ธฐ๋ณธ์œผ๋กœ cypress๊ฐ€ electron์—์„œ ๋Œ์•„๊ฐ€๊ธฐ ๋•Œ๋ฌธ์— ์ด๋Ÿฐ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š” ๊ฑธ๊นŒ ? ํ•ด์„œ script์— browser์„ธํŒ…์„ ํ•ด์ฃผ๊ณ  ์ง„ํ–‰ํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ๊ฒฐ๊ตญ ๋˜‘๊ฐ™๋”๊ตฐ์š”. ์‹ฌ์ง€์–ด ๋ฐฐ๊ฒฝ์ƒ‰์„ red๋กœ ์ฃผ์–ด๋„ ๊ธฐ๋Œ“๊ฐ’์€ ์œ„์— ์ € rgba์˜€์Šต๋‹ˆ๋‹ค.

Material ui์˜ theme๋ฅผ ๊ฐ€์ ธ๋‹ค๊ฐ€ ์“ฐ๊ณ ์žˆ๊ณ , selected๊ฐ€ ๋˜๋ฉด opacity๋ฅผ 0.08๋กœ ์ ์šฉํ•˜๊ฒŒ๋” ๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ 0.08๋กœ ํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ณ  ๋ชจ๋“  ์Šคํƒ€์ผ์„ ์ ์šฉํ•ด๋ณด์•„๋„ run์—์„œ ํ„ฐ์ง€๋Š” ์—๋Ÿฌ๋ฅผ ์žก๊ธฐ๋Š” ๋ถˆ๊ฐ€๋Šฅํ–ˆ์Šต๋‹ˆ๋‹ค.

์‹ฌ์ง€์–ด opacity 0.2๋Š” mui action theme์—๋„ ๋‚˜์™€์žˆ์ง€ ์•Š๋Š” ์Œฉ๋šฑ๋งž์€ opacity์ž…๋‹ˆ๋‹ค.

์ œ ์ƒ๊ฐ์—๋Š”, clickํƒ€์ด๋ฐ์— ๋ณด์—ฌ์ง€๋Š” opacity๋ฅผ ์ฝ๊ณ  test๊ฐ€ ์ง„ํ–‰๋˜์ง€ ์•Š๋‚˜ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋ฌผ๋ก  0.2๋กœ testing์„ ํ•˜๋ฉด, ํ˜„์žฌ ๋ชจ๋“  ํ™˜๊ฒฝ์—์„œ๋Š” ๋ฌธ์ œ๊ฐ€ ๋  ๊ฒƒ์ด ์—†์ง€๋งŒ ์˜๋ฏธ๊ฐ€ ์—†๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

์‹ค์ œ๋กœ๋Š” ์ œ๊ฐ€ ์ž„์˜์˜ background color๋ฅผ ์ฃผ๋Š” ๊ฒƒ๋„ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— background testing์€ ๊ณผ๊ฐํžˆ ์‚ญ์ œํ–ˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“„ ๊ด€๋ จ ์ฐธ๊ณ  ๋ฌธ์„œ

profile
if(๊ธฐ๋ก๐Ÿ“) ์„ฑ์žฅ๐ŸŒฑ

0๊ฐœ์˜ ๋Œ“๊ธ€