Autify Playwright Snippets

때때로 Autify Nexus에서 테스트를 자동화할 때, 표준 노코드 스텝만으로는 쉽게 해결할 수 없는 문제에 직면할 수 있습니다.

예시:

• 특정 좌표에서 클릭이 필요한 캔버스 기반 UI

• 재시도가 필요한 불안정한 요소

• 자동으로 대기가 발생하지 않는 내비게이션

• 중요한 요소를 가리는 광고나 팝업

• 레이아웃에 따라 뷰포트 크기를 맞춰야 하는 애플리케이션

• 다음 단계로 진행하기 전에 페이지가 완전히 로드되었는지 확인이 필요한 경우

• 이러한 문제는 Playwright 코드 스니펫을 사용하여 신뢰성 있게 해결할 수 있습니다.

스니펫 사용 방법

테스트에 Playwright 코드 스텝을 추가한 다음, 해당 스텝에 코드 스니펫을 복사/붙여넣기 하세요.

스니펫에 있는 로케이터는 페이지 상의 실제 대상 요소의 로케이터나 셀렉터로 교체하는 것을 잊지 마세요.
JavaScript 셀렉터, CSS 셀렉터, 또는 Playwright 로케이터 중 편한 것을 사용할 수 있습니다.

브라우저 뒤로/앞으로 내비게이션

내비게이션이 필요한 시나리오 위치에 Playwright 코드 스텝을 추가합니다.

뒤로 가기:

await page.goBack()

앞으로 가기:

await page.goForward()

뷰포트 크기 변경

예상된 렌더링에 맞게 페이지 크기를 특정 너비와 높이로 조정합니다.

await page.setViewportSize({ width: 999, height: 999 });

요소 강제 클릭

요소가 "이상적인" 클릭 가능한 상태가 아니더라도(예: 다른 요소에 가려져 있는 경우), 강제로 클릭을 수행합니다.

await page.click('#my-button', { force: true });

방해 요소 제거 (예: 광고)

테스트 작업에 방해가 될 수 있는 광고나 플로팅 배너를 제거합니다.

await page.evaluate(() => {
	const ad = document.querySelector('.ads-banner');
	if (ad) ad.remove();
});

불안정한 버튼에 대한 클릭 재시도

일부 버튼은 첫 시도에서 안정적으로 작동하지 않을 수 있습니다. 이 코드는 실패 시 한 번 더 시도합니다.

try {
	await page.click('#unstable-button');
} catch (e) {
	console.warn('Retrying button click...');
	await page.click('#unstable-button');
}

페이지 또는 요소가 준비될 때까지 테스트 및 새로고침

페이지가 가끔 불안정한 상태로 로드되는 경우, 새로고침하여 준비 상태를 확인합니다.

for (let i = 0; i < 5; i++) {
	await page.reload();
	if (await page.isVisible('#ready')) break;
    console.log("Element/page is not ready!");
}

링크 클릭 후 내비게이션 대기

링크 클릭으로 인해 내비게이션이 발생하는 경우, 페이지가 완전히 로드될 때까지 명시적으로 기다린 후 다음 단계로 진행하세요.

await Promise.all([
	page.waitForNavigation(),
	page.click('a.next-page'),
]);