Rayrun
← Back to Discord Forum

I need to change toHaveScreenshot() directory.

I am using Playwright to automate tests on my web project. I have created my project structure for the testing suite I am making for the automation. and the toHaveScreenshot keeps creating a directory at the root of the test file that saves the comparison screenshots. I have tried using chatbot and tried all the solutions it provided me to change the config file but none of them worked.

This thread is trying to answer question "How can I change the directory where toHaveScreenshot in Playwright saves comparison screenshots?"

9 replies

For me this didn't change the unwanted generated screenshot directory popping up Gpt gave me this as a solution earlier

this is not working for me, can someone get on call w me and help me out

tphillips8117

Can you share the code that's not working?

yes sure

await expect(page).toHaveScreenshot(["image22.png"]);

tphillips8117

Try including the tokens in your template: testData/draw/screenshot/{testFilePath}/{arg}{ext}

I did. still didnt change the directory

Answer

Sure, you can easily change the directory where toHaveScreenshot saves comparison screenshots in Playwright. This is done by modifying the playwright.config.ts file.

Here's how you can do it:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  outputDir: 'custom-snapshots-directory',
});

In this example, outputDir is set to 'custom-snapshots-directory'. You can replace this with any directory name that suits your project.

When you run your tests, all generated comparison screenshots will be saved in the specified directory (custom-snapshots-directory). Make sure this directory exists before running your tests to avoid errors.

Each test file will have its own separate snapshots directory. For instance, if you have a test file named example.spec.ts, Playwright Test will create a corresponding snapshots directory named example.spec.ts-snapshots. This helps keep snapshots organized and associated with their respective test files.

Don't forget to commit these snapshot directories to your version control system (like Git) so they're properly tracked and reviewed as part of your project's codebase.

By following these steps, you can easily change the directory where toHaveScreenshot saves comparison screenshots in Playwright.

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.