CODEWITHSUNDEEP
e2e-testingplaywright
abe1432181
abe1432181

Reputation: 1346

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

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 the test above - 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. There is no feedback giving any hints.

  1. Where are the screenshots stored?
  2. Is there a way to control the filename used?
  3. Can the filename include the project name so that 5 png files are not written over each other?

Upvotes: 8

Views: 16392

Answers (3)

Víctor
Víctor

Reputation: 685

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

The code above should result in

  • 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.

This step is executed for every browser. So the last run overwrites the previous screenshot taken.

TestInfo contains information about currently running test. This enables for example to store screenshots if chromium is used:

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.

Upvotes: 5

abe1432181
abe1432181

Reputation: 1346

Ok - I found out how - I needed to include workerInfo in the async declaration, and then I can reference it in the screenshot call:

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

Upvotes: 7

hardkoded
hardkoded

Reputation: 21695

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.

Upvotes: 1

Related Questions