
์ข ๋จ ํ ์คํธ๊ฐ ์ฒ์์ธ ๊ฐ๋ฐ์๋ฅผ ์ํ Playwright ๊ฐ์ด๋
์ข ๋จ ํ ์คํธ๊ฐ ์ฒ์์ธ ๊ฐ๋ฐ์๋ฅผ ์ํ Playwright ๊ฐ์ด๋ ๊ด๋ จ
์ทจ์ ์์ฅ๋งํผ์ด๋ ์ถ์ด ์ด๋ ๋ , ์ ๋จ์ฃผ ๋์ด ์ปคํผ์ฑ์ ์ ์ฒญํ์ต๋๋ค. ์ ๋จ์ฃผ ๋์ ์ด๋ ฅ์ ๋ฉํ ๋ง ์ดํ ์ ์ ๋ฉํ ์ ๋ฉํฐ ์ธ์ฐ์ ๋งบ์ด ๊ฐ๊ฐ์ด ๋ฉํ ๋ง์ ๋ฐ๊ณค ํ๋ ๋ฐฑ์๋ ๊ฐ๋ฐ์์ ๋๋ค. ์ถ์ด ๋ ์ด์ง๋ง, ์จ๋ผ์ธ ํ์ ์ปคํผ์ฑ์ ํ๋ฌ ์๊ฑฐ์ฃผ์ถค ์ฌ๋ฌด์ค์ ๋๊ฐ๋๋ค.
์ ๋จ์ฃผ ๋์ ์ค๋ ๋ ์ผ๊ตด๋ก ๋ค์ง๊ณ ์ง ํ๋ก ํธ์๋ ์ข ๋จ(End to End, E2E) ํ ์คํธ์ ๋ํด ๋ฌผ์ด ๋ด ๋๋ค.
์ ๋จ์ฃผ ๊ฐ๋ฐ์(์ดํ ์ ๋จ์ฃผ): ์ ๊ฐ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์์ํ๊ฑฐ๋ ์. ๊ฐ์ด ํ ์ด ํ๋ก์ ํธ ๋ง๋ค๋ ๋๋ฃ๊ฐ ์ทจ์ ํ๋ฉด์ ์ดํํ๊ฒ ๋์ด์์. ์ ๊ทธ๋๋ ํ์คํ ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ์๋ ์ฐธ์ด๋ผ ์์ํ์ด์.
์์์ ๋์น๋๋ฐ ๋ค์ ๋ง๋งํ๋์ง ์ง๋ฌธ์ด ์ค๊ตฌ๋๋ฐฉ์ ๋๋ค. ๊ทธ๋ฌ๋ฉด์๋ ์์ฆ ํํ, ๋ง์ด ์ฐ๋ ๊ธฐ์ ์คํ์ด ๊ถ๊ธํ๋ค๊ณ ํฉ๋๋ค. ๊ฐ๋ณ๊ฒ ์ฐจ๊ทผ์ฐจ๊ทผ ์์๊ฐ๋ ๊ณผ์ ์ด ํ์ํ๊ฒ ๊ตฐ์.
ํ๋ : ๊ฐ๋ฐ ๋ฐฉ๋ฒ๋ก ๊ณผ ํ๋ก์ธ์ค์์ ์ข ๋จ ํ ์คํธ๊ฐ ์ ํ์ํ์ง๋ถํฐ ์์ํด์ผ๊ฒ ๋ค์. ๊ทธ๋ค์, ์ ๊ฐ ์ถ์ฒํ๋ ๋๊ตฌ Playwright๊ฐ ์ด๋ฐ ์ข ๋จ ํ ์คํธ์์ ์ด๋ค ์ ์ ํนํ ๊ธฐ์ฌํ๋์ง ์ข ๋ ์์ธํ ์ดํด๋ณผ๊น์?
1. ๊ฐ๋ฐ ํ๋ก์ธ์ค์ ์ข ๋จ ํ ์คํธ์ ํ์์ฑ
์ํํธ์จ์ด ๊ฐ๋ฐ์ ์ผ๋ฐ์ ์ผ๋ก ๊ณํ(Plan) > ๊ฐ๋ฐ(Develop) > ํ ์คํธ(Test) > ๋ฐฐํฌ(Deploy) > ์ด์(Maintenance) ๋จ๊ณ๋ฅผ ๊ฑฐ์นฉ๋๋ค. ์ด ์ค ํ ์คํธ ๋จ๊ณ๋ ์ ํ ํ์ง์ ์ข์ฐํ๋ ๋จ๊ณ๋ก, ์ ์์ผ(Agile)์ด๋ ์คํฌ๋ผ(Scrum) ๊ฐ์ ๋ฐฉ๋ฒ๋ก ์ ์ ์ฉํ ๋ ํนํ ์ค์ํฉ๋๋ค. ๋น ๋ฅธ ์คํ๋ฆฐํธ ์ฃผ๊ธฐ๋ก ๊ธฐ๋ฅ์ ๊ตฌํํ๊ณ , QA๋ ์๋ํ ํ ์คํธ๋ก ๋น ๋ฅด๊ฒ ํผ๋๋ฐฑ์ ์ป์ด์ผ ํ๊ธฐ ๋๋ฌธ์ด์ง์.
์ ์์ผ ๊ฐ๋ฐ์ ๊ฒฝ์ฐ, ์ฌ์ฉ์ ์คํ ๋ฆฌ๋ฅผ ์คํ๋ฆฐํธ๋ง๋ค ๊ตฌํยท๊ฒ์ฆํฉ๋๋ค. ๋ฐ๋ผ์ ๊ธฐ๋ฅ ๋จ์(๋จ์ ํ ์คํธ)์ ๋ชจ๋ ๋จ์(ํตํฉ ํ ์คํธ)์์ ์ ์ ๋์ํด๋ ์ค์ ์ฌ์ฉ์ ๊ด์ ์ ํ๋ฆ์ ์ ๋ถ ์ ๊ฒํ๊ธฐ๋ ์ด๋ ต์ต๋๋ค. ๋, CI/CD(์ง์์ ํตํฉ/์ง์์ ๋ฐฐํฌ)๋ ์ฝ๋๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ์๋ ๋น๋ยทํ ์คํธยท๋ฐฐํฌ ํ์ดํ๋ผ์ธ์ ๊ฑฐ์นฉ๋๋ค. ์ด ๊ณผ์ ์ ๋ชจ๋ ํต๊ณผํ๋๋ผ๋ ๋ธ๋ผ์ฐ์ ์ ์ค์ ์ํธ์์ฉ, ์ฆ, ํด๋ฆญ, ์ ๋ ฅ, ๋ผ์ฐํ ๋ฑ์ด ์ ์์ธ์ง ๋ณด์ฅํ๊ธฐ ์ด๋ ต์ต๋๋ค.
์ข ๋จ ํ ์คํธ(E2E ํ ์คํธ)๋ ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด์ํด ์ค๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฒ์๋ถํฐ ๋๊น์ง, ์ค์ ๋ธ๋ผ์ฐ์ ํ๊ฒฝ์์ ์๋ํํด ํ์ธํ๋ฉฐ ์ฌ์ฉ์ ์ ์ฅ์์ ์๊ธธ ๋ฒํ ์น๋ช ์ ์ธ ๊ฒฐํจ์ ๋น ๋ฅด๊ฒ ๋ฐ๊ฒฌํ ์ ์์ต๋๋ค. ๋ก๊ทธ์ธ์ด๋ ๊ฒฐ์ ์ฒ๋ผ ์๋น์ค์ ์ฃผ์ ํ๋ฆ์ UI๊ฐ ์ฌ์ํ๊ฒ ๋ณํด๋ ํฐ ์ค๋ฅ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ๊ทธ๋ฐ ๋งํผ ์ข ๋จ ํ ์คํธ๋ก ๋ฏธ๋ฆฌ ๋๋นํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
2. Playwright ๊ธฐ๋ฐ ์ข ๋จ ํ ์คํธ

์น ํ๋ก ํธ์๋๋ฅผ ์ข ๋จ ํ ์คํธํ ๋ ์ฌ์ฉํ๋ ๋ช ๊ฐ์ง ๋๊ตฌ๊ฐ ์์ต๋๋ค. ๊ฐ ๋๊ตฌ๋ง๋ค ์ฅ๋จ์ ์ด ์์ง๋ง, ์ ๋ Playwright์ ์ถ์ฒํฉ๋๋ค.
๋ง์ดํฌ๋ก์ํํธ๊ฐ ์ฃผ๋์ ์ผ๋ก ๊ฐ๋ฐํ ์คํ์์ค ์น ์๋ํ ํ๋ ์์ํฌ์ธ Playwright๋ Chromium, Firefox, WebKit ๋ฑ ๋ค์ํ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํฉ๋๋ค. ๋ํ, Windows, Linux, MacOS ๋ฑ ์ฌ๋ฌ OS์์ ๋์ผํ ํ ์คํธ ํ์ง์ ๋ณด์ฅํ๋ฉฐ, ๋ชจ๋ฐ์ผ ์น ํ๊ฒฝ์ ์๋ฎฌ๋ ์ด์ ํ๋ ๋ฐ์๋ ์ฉ์ดํฉ๋๋ค. ์ด๋ฐ ์ฅ์ ์ธ์๋ ์ข ๋จ ํ ์คํธ์ ์ ์ฉํ ํน์ฑ์ด ๋ ์์ต๋๋ค.
- ์๋ ๋๊ธฐ(Auto-Waiting): ์น ํ์ด์ง ๋ก๋ฉ ์์ ์ ์๋์ผ๋ก ๊ฐ์งํ์ฌ ๋น๋๊ธฐ ํ๊ฒฝ์์๋ ์์ ์ ์ผ๋ก ํ ์คํธ๋ฅผ ์งํํฉ๋๋ค.
- ๋ ๋ฆฝ์ ์ธ ๋ธ๋ผ์ฐ์ ์ปจํ ์คํธ: ํ ์คํธ ์ผ์ด์ค๋ณ๋ก ์ธ์ ์ถฉ๋์ด๋ ๋ฐ์ดํฐ ๊ฐ์ญ์ ๋ฐฉ์งํฉ๋๋ค.
- ๋๋ฒ๊น ์ ์ ์ฉํ ๊ฐ๋ฐ์ ๋๊ตฌ: Trace Viewer, Inspector ๋ฑ์ ์ด์ฉํด ๋ณตํฉ ์ค๋ฅ๋ฅผ ์๊ฐ์ ์ผ๋ก ์ถ์ ํด ๋๋ฒ๊น ํจ์จ์ ๊ทน๋ํํฉ๋๋ค.
- ๋ณ๋ ฌ ์คํ๊ณผ ์ฑ๋ฅ ์ต์ ํ: ์ฌ๋ฌ ํ ์คํธ๋ฅผ ๋์์ ์ํํ ์ ์์ผ๋, ์์คํ ๋ฆฌ์์ค์ ์ถฉ๋ ๋ก๊ทธ ๊ด๋ฆฌ๋ฅผ ์ ์ํด์ผ ํฉ๋๋ค. ํนํ ์ข ๋จ ํ ์คํธ๋ ๋๊ฐ ๋จ์ ํ ์คํธ๋ณด๋ค ์๊ฐ์ด ์ค๋ ๊ฑธ๋ฆฌ๊ธฐ ๋๋ฌธ์ ํ ์คํ ์๋๋ ์ค์ํ ์์์ ๋๋ค.
์ ์ด์ ์ ๋จ์ฃผ ๋์ ์ข ๋จ ํ ์คํธ ๋๊ตฌ๋ก Selenium์ ์ผ๋์ ๋๊ณ ์์๋ค๊ณ ํฉ๋๋ค.
์ ๋จ์ฃผ: Selenium์ Python์ผ๋ก ์น ์คํฌ๋ํผ ๋ง๋ค ๋ ์จ๋ด์ ์ต์ํ๊ฑฐ๋ ์.
ํ๋ : ๋ฌผ๋ก Selenium์ ์ค๋ ์๊ฐ ๋ง์ ์ฌ๋์ด ์ฌ์ฉํด ์๊ณ , ๋ธ๋ผ์ฐ์ ์ง์๋ ๋ค์ํ๋ฉฐ, ์ฐธ๊ณ ํ ์๋ฃ๋ ๋ฌด์ฒ ๋ง๋ค๋ ์ฅ์ ์ด ์์ด์. ๊ธฐ๋ฅ๋ง ๋ณด๋ฉด ๋น์ทํ๊ณ ์. ํ์ง๋ง Playwright๋ ์๋๊ฐ ๋น ๋ฅด๊ณ , ๋ฌด์๋ณด๋ค ์๋ ๋๊ธฐ ๊ธฐ๋ฅ์ด ๋ฌด์ฒ ํธํด์.
์ ๋จ์ฃผ: ์๋ ๋๊ธฐ ๊ธฐ๋ฅ์ด ๋ญ์์?
ํ๋ : ์ค์ ์๋น์ค์์๋ ๋คํธ์ํฌ ์ง์ฐ์ด๋ ๋น๋๊ธฐ ๋ก๋ฉ์ด ํํ์์์. ํ๋ฉด์ HTML ์์(element)๊ฐ ์ด๋ฐ ๋น๋๊ธฐ ์ํฉ์ ํ์๋๊ธธ ๊ธฐ๋ค๋ฆฌ๋ ์ํฉ์ด ์ฆ์ ๊ฑฐ์ฃ . Playwright๋ ๋ก๋ฉ ์๋ฃ ์์ ์ ์ธ์ํ์ฌ ํ ์คํธ๋ฅผ ์งํํ๋ฏ๋ก ์์ ์ฑ์ด ํฌ๊ฒ ํฅ์๋ผ์. ๊ทธ๋ฐ ์ ์ด๋ฅผ ์ฝ๊ณ ํธ๋ฆฌํ๊ฒ ๋ค๋ฃฐ ์ ์์ด์.
3. Playwright๊ฐ ์ข ๋จ ํ ์คํธ์ ๊ธฐ์ฌํ๋ 4๊ฐ์ง
์ ๋จ์ฃผ: ์กฐ๊ธ ๋ ๊ถ๊ธํด์. Playwright๊ฐ ๋ค๋ฅธ ์ข ๋จ ํ ์คํธ ๋๊ตฌ๋ณด๋ค ์ข์, ์ฐจ๋ณํ ์ง์ ์ด ๋ญ๊ฐ์?
์ด๋ ํน์ฑ ํ๋๋ง์ผ๋ก Playwright๋ฅผ ์ด๋ค๊ณ ํ๊ธฐ๋ ์ด๋ ต์ต๋๋ค. ์ฌ๋ฌ ์์๊ฐ Playwright์ ๋งค๋ ฅ์ ์์ฑํฉ๋๋ค. ๊ธฐ๋ฅ๋ง์ผ๋ก๋ ๋ค๋ฅธ ์ข ๋จ ํ ์คํธ ๋๊ตฌ๋ ์ง์ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง๊ฑฐ๋ ์.
๋ณธ๊ฒฉ์ ์ผ๋ก Playwright์ ์ฅ์ ์ ์ค๋ช ํ๊ธฐ ์์, ์ฃผ์ ํ ์คํธ ๋๊ตฌ์ ๊ทธ ์ฅ๋จ์ ์ ๋ชจ์๋ดค์ต๋๋ค.

1. ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ & ๋ฉํฐ OS๋ฅผ ํญ๋๊ฒ ์ง์
Playwright๋ ๋จ์ผ API๋ก Chromium(Chrome/Edge), Firefox, WebKit(Safari)๋ฅผ ๋ชจ๋ ํ ์คํธํ ์ ์์ผ๋ฉฐ, WindowsยทLinuxยทMacOS์์ ๋์ผํ๊ฒ ์๋ํฉ๋๋ค.
๋ฐ๋ฉด, Puppeteer๋ Chromium ๊ธฐ๋ฐ ๋ธ๋ผ์ฐ์ ๋ง ์ง์ํฉ๋๋ค. Cypress ์ญ์ ์ต๊ทผ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ์ง์์ ๋๋ฆฌ๊ณ ์์ผ๋, Safari(WebKit) ๊ฐ์ ์ผ๋ถ ๋ธ๋ผ์ฐ์ ๋ ์ฌ์ ํ ์ง์์ด ์ ํ์ ์ ๋๋ค.
Playwright๋ Firefox์ WebKit๋ ๊ณต์ ์ง์ํ๋ฏ๋ก, ๋ค์ํ ์ฌ์ฉ์ ํ๊ฒฝ์์ ์ค์ ํธํ์ฑ์ ๋ณด์ฅํ๋ ๋ฐ ์ ๋ฆฌํฉ๋๋ค.
2. ์๋ ๋๊ธฐ(Auto-Waiting) ๋ฐ ๋๊ธฐ ์ ๋ต
๋คํธ์ํฌ ์ง์ฐ, ๋น๋๊ธฐ ์์ฒญ, ์ด๋ฏธ์งยทํฐํธ ๋ก๋ฉ ๋ฑ์ผ๋ก ์ธํด ์์๊ฐ ๋ฆ๊ฒ ๋ํ๋ ๋, Playwright๋ ์ด๋ฌํ ์์๊ฐ ๋ํ๋ ๋๊น์ง ์๋์ผ๋ก ๊ธฐ๋ค๋ ค์ฃผ๋ ๋ฉ์ปค๋์ฆ์ ํ์ฌํ๊ณ ์์ต๋๋ค. ์ด ์๋ ๋๊ธฐ ๊ธฐ๋ฅ์ด ๋ง์ ์ฌ๋์ด ์ ํธํ๋ ํน์ฅ์ ์ด์ง์.
๋ฌผ๋ก Selenium์ด๋ ๋ค๋ฅธ ํด์์๋ โwaitForโ ํจ์๋ฅผ ์ฌ์ฉํ ์ ์์ง๋ง, Playwright๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ชจ๋ ์ก์ ์ ๋๊ธฐ ๋ก์ง์ด ๋ด์ฅ๋์ด ์์ต๋๋ค. ๊ทธ ๋๋ฌธ์ ์คํฌ๋ฆฝํธ๊ฐ ๊ฐ๊ฒฐํด์ง๊ณ ์ค๋ฅ๊ฐ ์ค์ด๋ญ๋๋ค.
3. ๊ฐ๋ ฅํ ๋๋ฒ๊น ํด: Trace Viewer, Inspector, Codegen ๋ฑ

Playwright๋ ๋๋ฒ๊น ์ ์ํ ๊ฐ๋ ฅํ ๋๊ตฌ ํ์ฉ๋ ์ง์ํฉ๋๋ค.
Trace Viewer๋ ํ ์คํธ ์คํ ์ ๊ณผ์ ์ ๊ธฐ๋กํ๋ฉฐ, ์ด๋ฒคํธ, ์คํฌ๋ฆฐ์ท, ๋คํธ์ํฌ ์์ฒญ ํ์๋ผ์ธ์ ์ฌ์ํ ์ ์์ต๋๋ค.
Playwright Inspector๋ ์คํํ๋ค ์ผ์์ ์งํ๊ณ DOM ์ํ๋ฅผ ํ์ธํ๊ฑฐ๋, ๋จ๊ณ๋ณ๋ก ์งํํ๋ ๋ฐ ๋์์ ์ค๋๋ค. ์ด๋ฅผ ํ์ฉํ๋ฉด ์ด๋ ์๊ฐ ์๋ฌ๊ฐ ๋ฐ์ํ๋์ง ์ ํํ ํ์ ํ ์ ์์ต๋๋ค. ์ด๋ฒคํธ๊ฐ ๋น ๋ฅด๊ฑฐ๋ ์์๊ฐ ์ผ๊ด์ ์ด์ง ์์ ์ํฉ์์ ๋งค์ฐ ์ ์ฉํฉ๋๋ค.
๋ง์ง๋ง์ผ๋ก Codegen์ ๋ธ๋ผ์ฐ์ ์์ ์ค์ ๋ก ํด๋ฆญ, ์ ๋ ฅ ๋ฑ์ ์ํํ๋ฉด ๊ทธ์ ๋์ํ๋ ํ ์คํธ ์ฝ๋๋ฅผ ์๋์ผ๋ก ์์ฑํด ์ค๋๋ค. ์ด๊ธฐ ์คํฌ๋ฆฝํธ๋ฅผ ์์ฑํ๊ธฐ ์ฝ๊ณ ํธํ์ฃ . ์ข ๋จ ํ ์คํธ์์๋ ๋ฐ๋ณต๋๋ ์ฌ์ฉ์ ๋์ ์ฝ๋๋ฅผ ์์ฑํฉ๋๋ค. ๋ค๋ง ๋ ๋๋ง๋ UI ์์ผ๋ก ํ์ ๋๋ UI ์์๋ฅผ ์ ํํ๋ ๊ฒฝ์ฐ, AI์ ๋์์ ๋ฐ๊ธฐ ์ด๋ ค์ด ๊ฒฝ์ฐ๊ฐ ๋ง์ ์ฉ์ดํฉ๋๋ค.
4. ๋ณ๋ ฌ ์คํ & ๋น ๋ฅธ ์ฑ๋ฅ
์ข ๋จ ํ ์คํธ๋ ๋จ์ ํ ์คํธ๋ณด๋ค ์คํ ์๊ฐ์ด ๊ธธ ์๋ฐ์ ์์ง๋ง, Playwright๋ ๋ณ๋ ฌ ์คํ์ผ๋ก ์ฌ๋ฌ ํ ์คํธ ์ผ์ด์ค๋ฅผ ๋์์ ๋๋ฆด ์ ์์ต๋๋ค. ๊ทธ๋์ ํ ์คํธ๊ฐ ๋ง์์ง์๋ก ์๋ ๋ฉด์์ ๋ณด๋ ์ด๋์ด ์ปค์ง๋๋ค.
ํนํ ์์ ์๊ฐ์ด ์งง์ผ๋ฉด ์งง์์๋ก ์ข์ CI/CD ํ์ดํ๋ผ์ธ์์ ์ค๋ ๋๋ ์์ปค๋ฅผ ๋๋ ค ํ ์คํธ ์๊ฐ์ ํฌ๊ฒ ๋จ์ถํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ฉด์ ๋ธ๋ผ์ฐ์ ์ปจํ ์คํธ๋ฅผ ๋ถ๋ฆฌํด ์๋ก ์ํฅ์ ์ฃผ์ง ์๋๋ก ์ค๊ณํ๋ค๋ ์ ์ด ์ฅ์ ์ ๋๋ค.
๋ฌผ๋ก Cypress๋ Selenium Grid๋ ๋ณ๋ ฌํ๋ฅผ ์ง์ํ์ง๋ง, ์ค์ ์ด ๋ณต์กํ๊ฑฐ๋ ๋ธ๋ผ์ฐ์ ๋ณ ์ธํ ์ด ๋ฌ๋ผ์ง๋ ๊ฒฝ์ฐ๊ฐ ์๊ณ , ์ ๋ฃ ๊ฒฐ์ ๊ฐ ํ์ํ๊ธฐ๋ ํฉ๋๋ค. ๋ฐ๋ฉด Playwright๋ ๊ตฌ์ฑ ํ์ผ(โplaywright.config.jsโ)์์ ๊ฐ๊ฒฐํ๊ฒ ์ ์ด๊ฐ ๊ฐ๋ฅํฉ๋๋ค.
4. ์ค์ ์ฌ๋ก: Playwright๋ก ์ข ๋จ ํ ์คํธ ์ํํ๊ธฐ
ํ๋ : UI๊ฐ ์ ๋ฐ๋์ง ์์ง๋ง, ์๋น์ค์ ์์ด ์์ฃผ ์ค์ํด ๋ฌธ์ ๊ฐ ์๊ธฐ๋ฉด ์น๋ช ์ ์ธ ๋ถ๋ถ์ ๋ฌด์์ด ์์๊น์?
์ ๋จ์ฃผ: ํ์๊ฐ์ ์ด์! ์ ์ ๋ฐ๋๋ ๋ฌธ์ ๋ฅผ ๋์น๊ธฐ ์ฌ์ธ ๊ฒ ๊ฐ์์.
ํ๋ : ์ข์์. ๋ ๊ฒฐ์ ํ์ด์ง๊ฐ ์์ฃ . ์ข ๋จ ํ ์คํธ๋ ์์ด ๋ง์ด ๋๋, ์ฆ, ๋น์ฉ์ด ๋ง์ด ๋๋ ํ ์คํธ์์. ํ์ง๋ง ํ์๊ฐ์ ์ด๋ ๊ฒฐ์ ํ์ด์ง๋ ๊ธฐ๊บผ์ด ๋น์ฉ์ ๊ฐ์ํ๋ฉด์๋ ํ ์คํธํด์ผ ํ๋ ๊ณณ์ด์ฃ .
์ด์ฒ๋ผ ์ข ๋จ ํ ์คํธ๋ ๋น์ฉ์ ๊ฐ์ํ๋๋ผ๋ ๋๊ฐ๋ณด๋ค ๊ฐ์น๊ฐ ํจ์ฌ ํฐ ๊ณณ์ ์ ์ฉํ๋ฉด ์ข์ต๋๋ค.
1. ๊ฒฐ์ ํ๋ก์ธ์ค ์ข ๋จ ํ ์คํธ
๊ทธ๋ผ ๊ฒฐ์ ๊ณผ์ ์ ์ข ๋จ ํ ์คํธ๋ฅผ ์ ์ฉํ๋ ์๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
A. ์ฌ์ฉ์ ์๋๋ฆฌ์ค ๊ตฌ์ฑํ๊ธฐ
์ฌ์ฉ์๋ ์ฅ๋ฐ๊ตฌ๋์ ์ํ์ ๋ด๊ณ , ๊ฒฐ์ ์ ๋ณด๋ฅผ ์ ๋ ฅํ ๋ค, ๊ฒฐ์ ์๋ฃ ํ์ด์ง์์ ์ฃผ๋ฌธ ๋ฒํธ๋ฅผ ํ์ธํ ์ ์์ด์ผ ํ๋ค.
B. Playwright ํ ์คํธ ์๋๋ฆฌ์ค ๊ตฌ์ฑํ๊ธฐ
- ํ ํ๋ฉด ์ ์ > ์ํ ํด๋ฆญ
- ์ฅ๋ฐ๊ตฌ๋ ๋ด๊ธฐ ๋ฒํผ ํด๋ฆญ
- ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง์์ ์ํ์ด ์ถ๊ฐ๋์๋์ง ํ์ธ
- ๊ฒฐ์ ํ๊ธฐ ๋ฒํผ์ ๋๋ฌ ๋ฐฐ์กยท์นด๋ ์ ๋ณด๋ฅผ ์ ๋ ฅ
- ๊ฒฐ์ ์๋ฃ ํ์ด์ง๋ก ์ด๋ํ๊ณ ์ฃผ๋ฌธ ๋ฒํธ๊ฐ ๋ณด์ด๋์ง ๊ฒ์ฌ
import { test, expect } from '@playwright/test';
test('e์ปค๋จธ์ค ๊ฒฐ์ ํ๋ก์ธ์ค ์ข
๋จ ํ
์คํธ', async ({ page }) => {
// ํ ํ๋ฉด ์ ๊ทผ
await page.goto('https://puddingcamp.com/commerce');
// ์ํ ํด๋ฆญ
await page.getByText('์ ์ ํ ์ปคํผ๋จธ์ ').click();
// ์ฅ๋ฐ๊ตฌ๋ ๋ด๊ธฐ
await page.getByRole('button', { name: '์ฅ๋ฐ๊ตฌ๋ ๋ด๊ธฐ' }).click();
// ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง๋ก ์ด๋
await page.goto('https://puddingcamp.com/cart');
await expect(page.getByText('์ ์ ํ ์ปคํผ๋จธ์ ')).toBeVisible();
// ๊ฒฐ์ ์งํ
await page.getByRole('button', { name: '๊ฒฐ์ ํ๊ธฐ' }).click();
await page.getByLabel('์ฃผ์').fill('์์ธ์ ์ข
๋ก๊ตฌ 1');
await page.getByLabel('์นด๋๋ฒํธ').fill('1234 5678 9012 3456');
await page.getByRole('button', { name: '๊ฒฐ์ ์๋ฃ' }).click();
// ๊ฒฐ์ ์๋ฃ ํ์ด์ง ํ์ธ
await expect(page).toHaveURL(/checkout\/complete/);
await expect(page.getByText('์ฃผ๋ฌธ ๋ฒํธ')).toBeVisible();
});
Note
์ฝ๋์ page ๊ฐ์ฒด๋ฅผ ๋น๋กฏํ ์์ธํ API ํ์ฉ๋ฒ์ ์ง์ ๊ณต์ ๋ฌธ์๋ฅผ ๋ณด๊ณ ํ์ธํ๋ ํธ์ด ์ข์์. ์๋๋ฉด, ์ ๊ฐ ๋ด์ค๋ ํฐ์ ๋ฐํํ Playwright๋ฅผ ํ์ฉํ ์ข ๋จ ํ ์คํธ ๋ง๋ณด๊ธฐ ๊ธ์ ์ฝ์ด ๋ณด์ธ์.
์ด ํ ์คํธ๊ฐ ์ฑ๊ณตํ๋ฉด, ํต์ฌ ์ฌ์ฉ์ ํ๋ฆ, ๊ทธ๋ฌ๋๊น ์ฅ๋ฐ๊ตฌ๋ > ๊ฒฐ์ > ์๋ฃ ๊ณผ์ ์ด ์ ์์์ ๋ณด์ฅ๋ฐ์ ์ ์์ต๋๋ค. ๋ง์ฝ ์คํจํ๋ค๋ฉด, CI/CD ํ์ดํ๋ผ์ธ์์ ๋ฐฐํฌ๋ฅผ ์ฐจ๋จํด ์น๋ช ์ ๊ฒฐํจ์ ์ฌ์ ์ ํด๊ฒฐํด์ผ ํฉ๋๋ค.
2. ์ฌ๋ก๋ณ ์์ธํ ๋๋ฒ๊น ๋ฐฉ๋ฒ
์ ๋จ์ฃผ: ํ ์คํธ ์ฝ๋ ์ค๋ช ๊ธ๋ง ๋ด์๋ ์ค์ ์ฝ๋ ์ง๋ ๊ฒ์ด ๋ฌด์ฒ ๋ง๋งํ๋๋ฐ, ์ค์ ๋ก ํ ์คํธ ์ฝ๋๋ฅผ ์์ฑํด ๋ณด๋ ๋น๋ก์ ์ดํดํ ์ ์์์ด์. ์ด์ ๋๋ฒ๊น ์ ์ด๋ป๊ฒ ํ๋์ง๋ ๊ถ๊ธํด์.
ํ๋ : ์ฌ์ฉ ๋ฐฉ๋ฒ๋ณด๋ค ๋ ๊น๋ค๋ก์ด ๊ฑธ ์๊ตฌํ๋ฉฐ ์ง์์ ๋ฝ์๋ด๋ ค ํ๋๊ตฐ์. ํ๋ฅญํ ์์ธ์ ๋๋ค. ๋ช ๊ฐ์ง ๋ฌธ์ ํ์๊ณผ ์์ธ, ๊ทธ ํด๊ฒฐ ์ ์ฐจ๋ฅผ ์๋ ค ๋๋ฆด๊ฒ์.
A. ๊ฒฐ์ ์๋ฃ ํ์ด์ง ๋ก๋ฉ ์ง์ฐ
- ํ์: ๊ฒฐ์ ๋ฒํผ์ ๋๋ ์ผ๋, ํ์ด์ง๊ฐ ๋จ์ง ์๊ณ ํ์์์์ด ๋ฐ์
- ์์ธ: ์๋ฒ ์ง์ฐ, ๋คํธ์ํฌ ์ด์, ๊ฒฐ์ API ์ค๋ฅ ๋ฑ
- ํด๊ฒฐ ์ ์ฐจ:
- ํธ๋ ์ด์ค(Trace) ๊ธฐ๋ฅ์ผ๋ก ์ ์ฒด ๊ณผ์ ์ ๊ธฐ๋ก
- Trace Viewer์์ ํด๋ฆญํด HTTP ์์ฒญ/์๋ต ์ํ๋ฅผ ์์ธํ ์ดํ
- ์๋ต ์ฝ๋(200/500 ๋ฑ)์ ๋ฐ๋ผ ์๋ฒ ๋ก๊ทธ๋ APM ๋ชจ๋ํฐ๋ง ๊ฒฐ๊ณผ๋ฅผ ํ์ธ
- ํ์์์ ์ต์ ํ๋, ํน์ API ๊ฐ์ ์ ํตํด ๋ก๋ฉ ์๊ฐ์ ๋จ์ถ
B. ์ฅ๋ฐ๊ตฌ๋ ๋ด๊ธฐ ๋ฒํผ ๋ฏธ์๋
- ํ์: ๋ฒํผ ํด๋ฆญ ํ ์๋ฌด ๋ฐ์์ด ์๊ฑฐ๋ ์คํจ ์๋ฆผ ๋ฐ์
- ์์ธ: ํด๋ฆญ ์ด๋ฒคํธ ๋ฏธ์ค์ , CSS๋ DOM ๊ตฌ์กฐ ๋ณ๊ฒฝ์ผ๋ก ์ธํ ์ ๋ ํฐ ๋ถ์ผ์น
- ํด๊ฒฐ ์ ์ฐจ:
- Playwiright์
debug
๋ช ๋ น์ผ๋ก Inspector ํ์ฑํ, ๋จ๊ณ๋ณ ์คํ ํ์ธ - ์์๊ฐ ์กด์ฌํ์ง ์๊ฑฐ๋ โelement is not attached to the DOMโ ์๋ฌ ํ์ธ
- ์๋งจํฑ
์ ๋ ํฐ(โgetByRoleโ, โgetByTextโ)
๋ฅผ ์ฌ์ฉํด ๋ณ๊ฒฝ์ ๊ฒฌ๊ณ ํ๋๋ก ์ฝ๋ ๋ฆฌํฉํฐ๋ง
C. ํ๊ฒฝ ์ฐจ์ด๋ก ์ธํ ์คํจ (๋ก์ปฌ vs CI)
- ํ์: ๋ก์ปฌ์์ ํต๊ณผํ์ง๋ง CI์์๋ง ์คํจ
- ์์ธ: ๋ธ๋ผ์ฐ์ ๋ฒ์ , ํฐํธ, ํ๊ฒฝ ๋ณ์ ๋ฑ์ด ๋ฌ๋ผ ๋ฆฌ์์ค๋ฅผ ์ฐพ์ง ๋ชปํจ
- ํด๊ฒฐ ์ ์ฐจ:
pnpx playwright show-report
๋ฑ์ผ๋ก CI ๋ฆฌํฌํธ๋ฅผ ํ์ธ- Docker ์ปจํ ์ด๋ ๋ฑ์ผ๋ก ๋ธ๋ผ์ฐ์ /OS ๋ฒ์ ์ ํ์คํ
console.log
๋ ์คํฌ๋ฆฐ์ท ์ต์ ์ผ๋ก UI๋ฅผ ๋น๊ต, ํ๊ฒฝ ์ค์ ํ์ผ ๋๊ธฐํ
D. UI ๊ฐํธ์ผ๋ก ์ธํ ์ ๋ ํฐ ๋ถ๊ดด
- ํ์: ๋์์ด๋๊ฐ CSS ํด๋์ค๋ ๋ ์ด์์์ ๋ณ๊ฒฝํ ๋ค, ๊ธฐ์กด ํ ์คํธ๊ฐ ๋ฌด๋๊ธฐ๋ก ์คํจ
- ์์ธ: ํ๋์ฝ๋ฉํ CSS ์ ๋ ํฐ๊ฐ ๋ฌ๋ผ์ ธ ๋ฒํผ์ ๋ชป ์ฐพ์
- ํด๊ฒฐ ์ ์ฐจ:
- ์คํจ ์์ ์ ์คํฌ๋ฆฐ์ท์ด๋ DOM ๊ตฌ์กฐ ํ์ธ
getByText(โ์ฅ๋ฐ๊ตฌ๋ ๋ด๊ธฐโ)
๋ฑ ARIA ๊ธฐ๋ฐ ํ ์คํธ๋ก ๋ณ๊ฒฝ- ๋์์ด๋์ ํ์ํด ARIA ๋ผ๋ฒจ, ๊ณ ์ ํ ์คํธ ์ ์ง ์ ์ฑ ์๋ฆฝ
๋ง์น๋ฉฐ
ํ๋ ์ํํธ์จ์ด ๊ฐ๋ฐ์์ ์ข ๋จ ํ ์คํธ๋ ์ฌ์ฉ์ ๊ด์ ์ผ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฒ ์ ํ ๊ฒ์ฆํ๋ ์ค์ํ ๋จ๊ณ์ ๋๋ค. ํนํ ์ ์์ผ๊ณผ CI/CD๊ฐ ๊ฐ์กฐ๋๋ ํ๊ฒฝ์์, ํต์ฌ ์ฌ์ฉ์ ํ๋ฆ์ด ๊นจ์ง๋์ง ์กฐ๊ธฐ์ ํ์ธํด ์ฃผ๋ ์ข ๋จ ํ ์คํธ๋ ํ์์ ์ด๋ผ ํ ์ ์์ต๋๋ค. ๊ฐ๋ฐ ํ๋ก์ธ์ค์ ๋ฏธ์น๋ ์ํฅ์ด ์ ๋ง ํฌ์ง์.
๋ฌผ๋ก ํ๊ณ๋ ์์ต๋๋ค. ์ข ๋จ ํ ์คํธ๊ฐ ์ง๋์น๊ฒ ๋ง์ผ๋ฉด ์ ์ง๋ณด์๊ฐ ์ด๋ ต์ต๋๋ค. ๋จ์ UI ์คํ์ผ์ด ์๋๋ผ UX๋ UI ๊ตฌ์กฐ๊ฐ ๋ฐ๋๋ฉด ํ ์คํธ์ ์คํจํ ๊ฐ๋ฅ์ฑ์ด ํฌ์ง์. ๊ฒ๋ค๊ฐ ๋จ์ ํ ์คํธ๋ ํตํฉ ํ ์คํธ์ ๋นํด ์๋๋ ๋๋ฆฝ๋๋ค. ์๋ฒ์ ํ์ ํด์ผ ํ๋ ๋ถ๋ถ๋ ์ฌ๋ฟ ์๊ณ ์.
๊ทธ๋๋ Playwright๋ฅผ ํ์ฉํ๋ฉด, ํธ์์ฑ๊ณผ ์๋, ๋ง์กฑ์ค๋ฌ์ด ๊ธฐ๋ฅ์ ์ ๊ณตํด ์ด๋ฌํ ์ข ๋จ ํ ์คํธ์ ํ๊ณ์ ๋จ์ ์ ๊ทน๋ณตํ๋ ๋ฐ ๋์์ ์ค๋๋ค.
์ ๋จ์ฃผ: ์ข ๋จ ํ ์คํธ๊ฐ ์ ๋ง ๋ง๋งํ๋๋ฐ, ๊ผญ ํด๋ด์ผ๊ฒ ์ด์. ๊ฐ์ฌํฉ๋๋ค. ๊ทธ๋ฐ๋ฐ ๊ฒฐ๊ตญ ์ข ๋จ ํ ์คํธ ๊ณผ์ ์ PM, ๋์์ด๋์ ํ์ ํ ๋๋ ๊ผญ ํ์ํ ๊ณผ์ ๊ฐ์์. ํน์ ์ฌ๋ก๋ ๊ฒฝํ์ด ์์ผ์ ๊ฐ์? ์๋๋ฉด ์์ด๋์ด๋ฅผ ๋ ์ฌ๋ฆด ์๊ฐ์ด๋ ํค์๋๋ ์ข๊ณ ์!
ํ๋ฅญํฉ๋๋ค. ๋ค์ ๊ธ์์๋ ๋ค๋ฅธ ์ง๊ตฐ๊ณผ ํ์ ํ๊ฑฐ๋ ์ข ๋จ ํ ์คํธ๋ฅผ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ผ๋ก ์์ฉํ๋ ์ด์ผ๊ธฐ๋ฅผ ๋๋ ์ผ๊ฒ ์ต๋๋ค.