Where are playwright screenshots going - and how can I control this?

Question

I have a really basic playwright (v1.18.1) test on Windows (11):

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();
});

And when I run this - it says it worked

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) 

but I can find no sign of the screenshot file - where are they [there is no feedback giving any hints]. Also - is there a way to control the saved filename (including the project name so that I don't save 5 png files over each other).

Answer 1

The screenshot is always returned as a buffer by the screenshot function. If you don't pass a path the only way to get that screenshot is through the buffer.

Answer 2

As I see it, if you uncomment the line in which you specify the path for your screenshot to be stored, you should find it there, for example, this:

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` });
});

should result in you having a screenshot of the website named 'screenshot.png' in a folder named 'screenshots' in the root of your project. If there's no folder by that name, it will be created.

As for your question, since this would run the same step (saving a screenshot with a certain name in a certain path) for every project that you're running, your screenshot would be overwritten, leaving you only with the screenshot your last project run. If you'd like all screenshots to be stored, or screenshots for one project in particular (although running several projects), you can play with testInfo. Say you only want to store the screenshots for the project you're running in chromium, though checking the steps pass in every other project; you can do something like this:

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` });
    }
});

This would store a screenshot named 'testing chromium screenshots' with the extension .png in the folder 'screenshots' in the root of your project, tested with chromium, while checking the test pass in every other project you might be running.

Hope all this helps.