이 문서는 Playwright을 사용하여 PDF 검증 기술을 한 단계 끌어올릴 것입니다.

이 예에서 사용할 pdf 문서는 "Tesla Powerwall 2 Datasheet"입니다. 이 파일은 다음 위치에서 호스팅됩니다https://oedtrngbj.wpengine.com/wp-content/uploads/Powerwall_2_AC_Datasheet_EN_NA.pdf.

이 PDF 문서에는 여러 페이지, 일부 그림 및 표가 포함되어 있습니다.

주의 사항

이 접근 방식에서 발생한 다음 문제에 대해 솔직하게 말씀드리겠습니다.

이 해결 방법은 헤드 모드에서 크롬을 사용하여 테스트를 실행할 때만 작동하는 것 같습니다

.

pdf 뷰어 구성 요소에 포함된 요소는 Playwright에서 액세스할 수 없습니다. 즉, pdf에서 동적 요소를 가리거나 숨길 수 없습니다. 예: 고객 ID 또는 동적 날짜/시간 스탬프

Playwrights의 기본 제공 시각적 비교 라이브러리를 사용하고 있습니다. 기본 이미지를 최신 상태로 유지하는 데 필요한 유지 관리에 익숙해지는 것이 좋습니다. Playwright 설명서

의 Visual comparisons 페이지를 참조하십시오.

이러한 타협에 만족한다면 계속 읽으십시오!

page.setContent() + toMatchSnapshot() = 🤩

setContent() 를 사용하여 pdf를 다음과 같이 iframe 에 로드합니다.

  const pdfResource =
    'https://oedtrngbj.wpengine.com/wp-content/uploads/Powerwall_2_AC_Datasheet_EN_NA.pdf';
  let iframe = `<iframe src="${pdfResource}#zoom=60" style="width: 100%;height:100%;border: none;"></iframe>`;
  await page.setContent(iframe);
  await page.waitForTimeout(5000);

NOTE: You may need to experiment with the zoom level, width, height attributes to suit your needs

ANOTHER NOTE: The waitForTimeout function is used here to wait for the pdf contents to be loaded into the iframe

Playwrights의 주장 expect(screenshot).toMatchSnapshot(name[, options]) => https://playwright.dev/docs/test-assertions#screenshot-assertions-to-match-snapshot-1 을 사용하여 로케이터와 일치하는 특정 요소의 스크린샷을 캡처합니다. 이 경우에는 PDF 파일이 완전히 로드된 상태에서 위의 iframe의 스크린샷을 찍어야 합니다. 특정 페이지로.

우리의 솔루션은 다음 기능을 사용합니다.

  expect(await page.locator('iframe').screenshot()).toMatchSnapshot();

완료된 테스트는 다음과 같습니다 ...

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

test('validate a complex pdf', async ({ page }) => {
  const pdfResource =
    'https://oedtrngbj.wpengine.com/wp-content/uploads/Powerwall_2_AC_Datasheet_EN_NA.pdf';
  let iframe = `<iframe src="${pdfResource}#zoom=60" style="width: 100%;height:100%;border: none;"></iframe>`;
  await page.setContent(iframe);
  await page.waitForTimeout(5000);
  expect(await page.locator('iframe').screenshot()).toMatchSnapshot();
});

테스트를 실행합니다. 다음 오류와 함께 실패해야 합니다.





Playwright는 요소의 골든 스냅샷을 찾지 못했기 때문에 첫 번째 테스트 실행에서 이 파일을 자동으로 생성합니다. 이 파일을 리포지토리에 커밋해야 합니다.



테스트를 다시 실행합니다. 이번에는 비교할 기본 이미지가 이미 있으므로 통과해야 합니다.



좋아, 잘 됐어. 우리는 pdf의 첫 페이지를 검증했습니다.

그러나 야생에서 접하게 될 대부분의 PDF에는 여러 페이지가 포함되어 있습니다. 여러 페이지에 맞게 테스트를 수정하겠습니다.

test('validate a complex pdf II, all pages', async ({page}) => {
  const numberOfPages = 2;
  for (let i = 1; i < numberOfPages + 1; i += 1) {
    let pdfResource =
      'https://oedtrngbj.wpengine.com/wp-content/uploads/Powerwall_2_AC_Datasheet_EN_NA.pdf';
    let iframe = `<iframe src="${pdfResource}#zoom=60&page=${i}" style="width: 100%;height:100%;border: none;"></iframe>`;
    await page.setContent(iframe);
    await page.waitForTimeout(5000);
    expect(await page.locator('iframe').screenshot()).toMatchSnapshot({
      name: `pdf_validation_page_${i}.png`,
    });
  }
});

작업이 완료되었습니다.

고려해야 할 기타 개선 사항

(모두 전적으로 선택 사항이며 구현하는 것은 전적으로 귀하에게 달려 있습니다)

페이지 수를 동적으로 결정합니다. 위의 예에서는 예상 페이지 수에 대해 미리 정의된 값을 사용합니다.

하드 코딩된 항목waitForTimeout을 제거하고 내용이 로드될 때까지 기다리는 더 나은 방법을 구현합니다.

마지막 해결책