๐ก Cypress testing ์ค ๊ฒช์ ์ด์์ ๋ํด์ ๊ณต์ ํ๊ณ ์ ์ด ์ํฐํด์ ์์ฑํ๊ฒ ๋์์ต๋๋ค.
๋ค๋น๊ฒ์ดํฐ์ ์์ดํ
์ ํด๋ฆญํ์๋, ํด๋น ์์ดํ
์ css ๋ณ๊ฒฝ์ ํ
์คํ
ํ๋ ๋ชจ๋์
๋๋ค.
-> ์ด ์ฝ๋๋, ์๋ฌ๊ฐ ๋ฐ์ํ๋ ์ฝ๋์
๋๋ค. ์๋ฌ ํ๋ฉด์ ๋ณด๋ฉด,
-> ์ ๊ฐ ์์ฑํ ์ฝ๋๋, 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์์ ํ
์คํ
์ ํ ์ ์๋ ๋ฐฉ๋ฒ์ 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์ ๊ณผ๊ฐํ ์ญ์ ํ์ต๋๋ค.
๐ ๊ด๋ จ ์ฐธ๊ณ ๋ฌธ์