[인프런] Playwright 기초 - 제출 양식 테스트 작성하기

 

Section3 기초 예제

제출 양식 테스트 작성하기

활용한 페이지는 Next.js의 회원가입 페이지

플랜 타입 중 Personal Project를 클릭하고 Your Name에 한 글자 이상을 입력하면 제출 버튼이 활성화되는 것을 테스트

 

 

https://vercel.com/signup 페이지에서 테스트 실행 중

Plan Type 옵션이 선택됨 (I'm working on personal projects)

Your Name 필드에 'a'가 입력됨

 

 

e2e 아래에 새로운 파일을 만듦. "form.spec.ts" Playwright와 VS Code 디버깅 환경, 🔴 디버그 브레이크포인트(Breakpoint) 설정, 각 동작(클릭, 입력)의 실행 시간 표시됨 (예: fill('a') → 19ms), 디버깅이 걸린 위치 확인

 

---

Playwright 테스트 코드 분석

test.describe('sign-in', () => {
  test.describe('validation', () => {
    test('If select plan type and fill name, submit enabled', async ({ page }) => {
      const startUrl = 'https://vercel.com/signup';
      await page.goto(startUrl); // URL 이동 (901ms)

      await page.getByText("I'm working on personal projects").click(); // 버튼 클릭 (77ms)

      await page.getByLabel('Your Name').fill('a'); // 이름 입력 (19ms)

      await expect(
        page.getByRole('button', { name: 'Continue' })
      ).toBeEnabled(); // "Continue" 버튼 활성화 확인 (18ms)
    });
  });
});

 

---

해석

회원가입 페이지(https://vercel.com/signup)로 이동

"I'm working on personal projects" 버튼 클릭

"Your Name" 필드에 'a' 입력

"Continue" 버튼이 활성화되는지 확인