我们可以在测试之外使用 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