Playwright와 Await

Playwright에서, JavaScript와 TypeScript에서 사용되는 것처럼 await는 비동기 작업을 처리하기 위해 사용됩니다. Playwright의 API 함수는 종종 비동기 작업의 완료(또는 실패)를 나타내는 Promise 객체를 반환합니다. await를 사용하면 코드 실행이 해당 Promise가 해결될 때까지 기다리게 되어, 비동기 코드를 동기 코드처럼 쉽게 읽고 작성할 수 있습니다.

 

 

비동기 작업:

• 페이지로 이동하기 (page.goto()), 요소를 클릭하기 (locator.click()), 텍스트 필드를 채우기 (locator.fill())와 같은 Playwright 작업은 모두 비동기입니다. 이러한 작업은 네트워크 요청, DOM 상호작용, 또는 브라우저 이벤트를 기다리는 동안 즉시 완료되지 않습니다.
• 이러한 메서드들은 Promise 객체를 반환하며, 작업을 완료하는 데 시간이 걸립니다.

await 키워드:

• await 키워드는 Promise가 해결될 때까지 async 함수의 실행을 일시 중지합니다.
• await 없이 Playwright는 작업이 완료될 때까지 기다리지 않으므로 예측할 수 없는 결과가 발생할 수 있습니다. 예를 들어, 페이지 탐색이 완료되기 전에 요소와 상호작용하려 하면 테스트가 실패할 수 있습니다.

ex)

import { test } from '@playwright/test';

test('Playwright에서 await 사용 예시', async ({ page }) => {
    // URL로 이동
    await page.goto('https://example.com');

    // 요소를 찾고 클릭하기
    const button = page.locator('button#submit');
    await button.click();

    // 입력 필드 채우기
    await page.fill('#name', 'John Doe');

    // 특정 텍스트가 있는지 어설션하기
    await expect(page.locator('h1')).toHaveText('Welcome, John Doe');
});

위 예시에서:

• await page.goto('https://example.com');은 페이지가 완전히 로드될 때까지 기다립니다.
• await button.click();은 클릭 작업이 완료될 때까지 기다리며, 여기에는 네트워크 요청 또는 DOM 변경을 기다리는 작업이 포함될 수 있습니다.
• await page.fill('#name', 'John Doe');는 입력 필드가 주어진 값으로 채워질 때까지 기다립니다.
• await 없이 다음 줄이 이전 작업이 완료되기 전에 실행되면 오류가 발생하거나 예상치 못한 동작이 발생할 수 있습니다.

 

Playwright에서 await를 사용하는 이유:

• 작업 순서 보장: UI 테스트의 많은 단계들은 순차적으로 수행되어야 합니다. await는 각 단계가 완료된 후에 다음 단계로 진행되도록 보장합니다.
• Promise를 깔끔하게 처리: await를 사용하면 .then() 체인으로 Promise를 수동으로 처리하지 않아도 되므로 코드가 더 읽기 쉬워집니다.
• 완료될 때까지 대기: Playwright 작업은 페이지나 요소의 상태에 따라 달라질 수 있으므로, await는 현재 단계가 완료될 때까지 기다리도록 도와줍니다.

async 함수 내부에서 await 사용:

• await는 async 함수 내에서만 사용할 수 있습니다. async 키워드는 함수가 Promise를 반환하게 하며, 이로 인해 함수 내에서 await를 사용할 수 있게 해줍니다.
• Playwright 테스트에서 대부분의 테스트 함수는 async로 정의되어 있어 브라우저 상호작용에 await를 사용할 수 있습니다.

 

test('예제 async 함수', async ({ page }) => {
    // 비동기 작업을 위해 await 사용
    await page.goto('https://example.com');
});