Answer

Running a Screenshot Test with Playwright

First off, make sure you've got Playwright installed in your project. If not, you can add it with this command:

npm install @playwright/test

Next, create a test file, say example.spec.ts, and import the necessary functions:

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

Now, define a test case. Here's an example:

test('example test', async ({ page }) => {
  // Your test code goes here
});

In the callback function, navigate to the webpage you want to test:

await page.goto('https://ray.run');

To capture a screenshot of the entire page, use the page.screenshot method:

await page.screenshot({ path: 'screenshot.png' });

This will save a full-page screenshot as "screenshot.png" in your project directory. If you want to capture screenshots of specific elements, use locators:

await page.locator('.header').screenshot({ path: 'header-screenshot.png' });

This captures a screenshot of an element with class "header". You can customize your screenshots with additional parameters to page.screenshot.

Finally, run your screenshot tests with the Playwright test runner:

npx playwright test

On first run, Playwright Test generates reference screenshots. Subsequent runs compare against these and report differences. Remember to review and update your screenshots when necessary with the --update-snapshots flag. Happy testing!