我們可以在測試之外使用 toHaveScreenshot() 和 toMatchSnaphot()

Question

我們可以在測試之外使用toHaveScreenshot()和toMatchSnaphot()而不使用配置文件嗎？只需簡單安裝 NPM 我劇作家在 package.json

我已經有一個快照 我想使用 toHaveScreenshot() 方法比較快照，但我很困惑我們可以在測試上下文之外使用嗎？

const { chromium } =require( "playwright");

const example = async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto("https://zversal.com/");
 
  await page.toHaveScreenshot("zeversal.png", {
    fullPage: false,
    maxDiffPixelRatio: 0.24,
  });
};
example();

控制台報錯：

toHaveScreenshot() 必須在測試期間調用

Answer 1

我認為這是不可能的。 Afaik， toHaveScreenshot()是@playwright/test package 的一部分。

如果我正在查看Page API 文檔，則沒有列出toHaveScreenshot() 。 我會說它只能與 Playwright Test 結合使用，並且提供了expect方法。

await expect(page).toHaveScreenshot();

Answer 2

我不知道是否可以在測試之外使用它，但是您可以創建一個 PlaywrightDevPage 幫助程序 class 來封裝頁面上的常用操作。

簡單用法=>

    // models/PlaywrightDevPage.js
    class PlaywrightDevPage {
      /**
       * @param {import('playwright').Page} page 
       */
      constructor(page) {
        this.page = page;
        this.getStartedLink = page.locator('a', { hasText: 'Get started' });
        this.gettingStartedHeader = page.locator('h1', { hasText: 'Installation' });
        this.pomLink = page.locator('li', { hasText: 'Playwright Test' }).locator('a', { hasText: 'Page Object Model' });
        this.tocList = page.locator('article div.markdown ul > li > a');
      }
      async getStarted() {
        await this.getStartedLink.first().click();
        await expect(this.gettingStartedHeader).toBeVisible();
      }
    
      async pageObjectModel() {
        await this.getStarted();
        await this.pomLink.click();
      }
    }
    module.exports = { PlaywrightDevPage };

更多信息 => PlaywrightDevPage