대화 상자의 문구를 확인하십시오

이 페이지에서는 JavaScript 다이얼로그에 표시되는 텍스트를 스텝에서 검증하는 방법에 대해 설명합니다.

다이얼로그 자동 처리에 관한 주의사항

Nexus 테스트 실행 시, 시나리오에 다이얼로그를 닫는 스텝이 명시적으로 없는 경우, 다이얼로그가 나타나면 자동으로 닫는 조작을 수행합니다.

실행 시 자동으로 닫히는 대상이 되는 다이얼로그는 다음 3가지 종류입니다:

• confirm 다이얼로그 (OK, Cancel)

• alert 다이얼로그 (OK)

• prompt 다이얼로그 (텍스트 입력 필드, OK, Cancel)

검증 절차

Playwright의 page.waitForEvent('dialog')를 사용하면 다이얼로그가 표시되기를 기다렸다가 그 내용을 검증할 수 있습니다. 검증을 수행하려면 다이얼로그 이벤트를 기다리는 처리와 해당 다이얼로그를 표시하게 하는 트리거 조작(버튼 클릭 등)을 코드 내에 기술해야 합니다.

샘플 코드 (알림 다이얼로그의 경우)

아래는 버튼을 클릭했을 때 표시되는 알림 다이얼로그의 텍스트가 "I am a JS Alert"인지 검증하는 샘플 코드입니다.

const dialogPromise = page.waitForEvent('dialog', (dialog) => {
    // Verify the dialog message
    expect(dialog.message()).toBe('I am a JS Alert');
    // Verify that the dialog type is 'alert'
    expect(dialog.type()).toBe('alert');
    // Dismiss the dialog
    dialog.dismiss();
    return true;
});
// Click the element that triggers the dialog
await page.getByRole('button', { name: 'Click for JS Alert' }).click();
// Wait for the dialog to be handled
await dialogPromise;

코드 설명

• page.waitForEvent('dialog', (dialog) => { ... })

  • 다이얼로그 이벤트가 발생하기를 기다립니다. 다이얼로그가 표시되면 두 번째 인수인 콜백 함수가 실행됩니다.

• expect(dialog.message()).toBe('기대하는 텍스트')

  • 다이얼로그에 표시된 메시지를 가져와 기대하는 텍스트와 일치하는지 검증(Assertion)합니다.

• expect(dialog.type()).toBe('alert')

  • 다이얼로그의 종류를 검증합니다. 알림의 경우는 alert, 확인 다이얼로그의 경우는 confirm을 지정합니다.

• dialog.dismiss()

  • 다이얼로그를 닫습니다. 확인 다이얼로그에서 "OK"를 클릭하는 동작을 원할 경우 dialog.accept()를 사용합니다.

• await page.getByRole(...).click()

  • 다이얼로그를 표시하게 하는 트리거 조작입니다. 대상 요소나 조작에 맞게 적절히 변경해 주십시오.

테스트 구현을 확인하는 방법

Assertion이 기대한 대로 작동하는지 확인하기 위해, toBe()에 전달하는 기대 문자열을 일시적으로 일부러 틀린 내용(예: toBe('잘못된 텍스트'))으로 변경하여 테스트를 실행해 보십시오. 테스트가 올바르게 실패한다면, 검증 스텝이 의도한 대로 작동하고 있음을 확인할 수 있습니다.