Playwright로 iframe 테스트

종단 간 테스트를 통해 페이지의 iframe에서 무언가를 테스트해야 했던 적이 있습니까? 포함된 비디오의 재생 버튼을 테스트하는 것조차 어려웠지만 최신 웹 앱에 대한 신뢰할 수 있는 종단 간 테스트가 등장했습니다Playwright. Playwright가 iframe 테스트에 어떻게 도움이 되는지 살펴보겠습니다.

로케이터

iframe 테스트에 뛰어들기 전에 Playwright가 locators을 사용할 때 어떻게 작동하는지 먼저 이해하겠습니다.

로케이터는 내장된 자동 대기 및 재시도 기능을 사용하여 언제든지 페이지에서 요소를 찾는 방법입니다. 즉, Playwright는 iframe을 포함하여 요소가 나타날 때까지 자동으로 대기하므로 설정된 시간 제한이 필요하지 않습니다.

로케이터는 page.locator(selector[, options]) 메서드로 생성됩니다.

기본적으로 엄격함

로케이터는 기본적으로 엄격하며 둘 이상을 찾으면 오류가 발생합니다.

await page.locator('button').click()

페이지에 많은 버튼이 있는 이 시나리오를 상상해 보십시오. 페이지에 버튼 요소가 두 개 이상 있으면 어떤 버튼을 클릭할지 모르기 때문에 테스트가 실패합니다.

로케이터 + 첫 번째

이 문제를 해결하는 방법은 여러 가지가 있지만 한 가지 예는 버튼의 첫 번째 인스턴스를 선택하는 것입니다.

await page.locator('button').first().click()

로케이터 + n번째 자식

또 다른 옵션은 CSSnth-child 선택기를 사용하는 것입니다. 그러면 부모의 n번째 자식인 요소가 선택됩니다. 이 경우 첫 번째 것입니다.

await page.locator('div:nth-child(1) button').click()

로케이터 + hasText

또 다른 옵션은 HasText를 사용하는 것입니다. 이는 대소문자를 구분하지 않는 하위 문자열 일치이며 문자열과 정규식을 모두 허용합니다. 즉, 'shoes-card' 클래스가 있는 모든 div에서 검색하고 'Guchi'라는 텍스트가 있는 항목을 찾고 그 안에 있는 버튼을 찾을 수 있습니다.

await page
  .locator('.shoes-card', { hasText: 'Guchi' })
  .locator('button')
  .click()

로케이터 + 기능:

위와 유사한 또 다른 옵션은 내부에 다른 로케이터가 포함되어 있는지 확인하는 has: 옵션을 사용하는 것입니다.

await page
  .locator('.shoes-card', { has: page.locator('text=Guchi') })
  .locator('button')
  .click()

이에 대한 또 다른 예를 보여주기 위해 장바구니에 항목이 있는 장바구니 페이지가 있습니다. 카트에서 특정 항목을 제거할 수 있도록 카트에서 제거 버튼을 선택하려고 합니다.

이번에도 has: 옵션을 사용하여 이번에는 'Guchi' 값이 있는 이미지 대체 선택기를 사용하여 로케이터가 있는 행을 찾습니다. 이제 로케이터는 이 한 행에만 집중하고 장바구니에서 제거라는 aria 레이블이 있는 버튼을 찾습니다. 다시 우리는 엄격 모드에 주의를 기울여야 하며 값이 'Guchi'인 이미지 대체 이미지가 하나만 있는지 확인해야 합니다. 그렇지 않으면 테스트가 실패합니다.

프레임 로케이터

iframe을 테스트할 때 iframe을 검색하고 해당 iframe 내부의 요소를 찾을 수 있는 FrameLocator를 사용할 수 있습니다. 예를 들어 페이지에 포함된 YouTube 동영상의 재생 또는 일시 중지 버튼을 테스트할 수 있습니다.



FrameLocator는 page.frameLocator(selector) 또는 locator.frameLocator(selector) 방법으로 생성할 수 있습니다.

await page.frameLocator('iframe').locator('[aria-label="Pause"]').click()

로케이터와 마찬가지로 프레임 로케이터도 엄격하므로 페이지에서 둘 이상의 iframe을 찾으면 이 테스트에서 오류가 발생합니다.

결론

이것이 로케이터와 프레임 로케이터를 사용하여 페이지에서 iframe을 테스트하는 방법입니다. 재미있는 테스트를 하시고 질문이나 의견이 있으시면 언제나 연락해 주십시오.

유용한 링크

Playwright docs

Codegen

VS Code Extension

FrameLocator

Getting Started with Playwright