剧作家的截图去哪儿了——我该如何控制它？

Question

我在 Windows (11) 上有一个非常基本的剧作家 (v1.18.1) 测试：

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

test('test', async ({ page }) => {
  await page.goto('http://whatsmyuseragent.org/');
  //await page.screenshot({ path: `./tests/tmp/screenshots/whats.my.ua.${project:name}.png` });
  await page.screenshot();
});

当我运行它时 - 它说它有效

Running : cd C:\playwright\tests && npx playwright test whats_my_user_agent.spec.ts --reporter=list

Running 5 tests using 3 workers

   ok   [webkit] › whats_my_user_agent.spec.ts:3:1 › test   (3s) 
   ok   [firefox] › whats_my_user_agent.spec.ts:3:1 › test   (4s) 
   ok   [chromium] › whats_my_user_agent.spec.ts:3:1 › test   (5s) 
   ok   [Mobile Chrome] › whats_my_user_agent.spec.ts:3:1 › test   (2s) 
   ok   [Mobile Safari] › whats_my_user_agent.spec.ts:3:1 › test   (2s) 


   5 passed   (8s) 

但我找不到屏幕截图文件的迹象 - 它们在哪里 [没有提供任何提示的反馈]。另外 - 有没有办法控制保存的文件名（包括项目名称，这样我就不会相互保存 5 个 png 文件）。

Answer 1

好的 - 我发现了如何 - 我需要在异步声明中包含 workerInfo，然后我可以在屏幕截图调用中引用它：

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

test('test', async ({ page }, workerInfo) => {              <----------- added workerInfo
      await page.goto('http://whatsmyuseragent.org/');
      await page.screenshot({ path: "./tests/tmp/screenshots/whats.my.ua."+workerInfo.project.name+".png" });
      //                                                                   ^^ referenced it with this
});

Answer 2

如我所见，如果您取消注释指定要存储屏幕截图的路径的行，您应该在那里找到它，例如：

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

test('testing screenshot path', async ({ page }) => {
    await page.goto('https://playwright.dev/');
    await page.screenshot({ path:`./screenshots/screenshot.png` });
});

上面的代码应该导致

• 有一个名为

  'screenshot.png'

的网站截图
• 在名为

  'screenshots'

的文件夹中
• 在项目的根目录中。如果没有该名称的文件夹，它将被创建。

每个浏览器都执行此步骤。所以最后一次运行会覆盖之前截取的屏幕截图。

TestInfo 包含有关当前正在运行的测试的信息。例如，如果使用铬，这可以存储屏幕截图：

test('testing chromium screenshots', async ({ page }, testInfo) => {
    await page.goto('https://playwright.dev/');
    if (testInfo.project.name === 'chromium') {
        await page.screenshot({ path:`./screenshots/${testInfo.title}.png` });
    }
});

这将在项目根目录的“screenshots”文件夹中存储名为

testing chromium screenshots

且扩展名为 .png 的屏幕截图，使用 chromium 进行测试，同时检查您可能正在运行的每个其他项目的测试通过情况。

希望所有这些都有帮助。

Answer 3

buffer

函数始终将屏幕截图作为

screenshot

返回。如果您不通过

path

获取该屏幕截图的唯一方法是通过缓冲区。