[Docs]: Playwright webkit screenshot configuration about playwright

[dgozman]

@napsta32 Are you using await expect(page).toHaveScreenshot() assertion? I believe that this assertion defaults to non-retina screenshots. If that's not the case, we would love to see a repro to debug it.

[napsta32]

@dgozman I used this to test snapshots and got the "scaled" screenshots in webkit:

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

test('button snapshot', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  const getStartedButton = page.getByText('Get started');
  const screenshot = await getStartedButton.screenshot({
      type: 'png'
  });
  expect(screenshot).toMatchSnapshot();
});

To create the project I used npm init playwright@latest.
To run the test: npx playwright test --update-snapshots

Snapshots generated:

• Chromium: 177× 52
• Firefox: 178 × 52
• WebKit: 354 × 104

System info:

$ npx envinfo --preset playwright

  System:
    OS: macOS 14.4.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
    Memory: 605.48 MB / 16.00 GB
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
  IDEs:
    VSCode: 1.90.1 - /usr/local/bin/code
  Languages:
    Bash: 5.2.26 - /usr/local/bin/bash
  npmPackages:
    @playwright/test: ^1.44.1 => 1.44.1 

[napsta32]

Using toHaveScreenshot effectively uses a different scale factor:

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

test('button snapshot', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  const getStartedButton = page.getByText('Get started');
  await expect(getStartedButton).toHaveScreenshot();
});

[dgozman]

@napsta32 Pass the scale: 'css' option when taking a screenshot. Or better yet, use toHaveScreenshot() assertion instead. This way, you'll always get css-scaled screenshots.