Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Playwright Visual Doc Updates #2937

Merged
merged 2 commits into from
Sep 11, 2024
Merged

Playwright Visual Doc Updates #2937

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
742df1f
minor updates, add visual examples link
Sep 10, 2024
ed98870
lint fix
Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions docs/visual-testing/integrations/playwright.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,9 +104,11 @@ import { test, expect } from '@playwright/test'
with

```js
import { test, expect } from './custom-test'
import { test, expect } from '../custom-test'
```

(or the location of the custom test file relative to the current directory)

### Step 4 - Use Sauce Visual in Your Tests

If you've set up a fixture during Step 3, use the 'Fixture' example, otherwise, you can still access Sauce Visual using our exported function with the 'Standard' example.
Expand All @@ -119,8 +121,8 @@ import { test, expect } from '../custom-test';
// Add the `sauceVisual` fixture into each test you want to capture a snapshot in
// -------------------------------- here ▼ --------------------------------------
test('has title', async ({ page, sauceVisual }) => {
await page.goto('https://playwright.dev/');
await expect(page).toHaveTitle(/Playwright/);
await page.goto('https://docs.saucelabs.com/visual-testing/');
await expect(page).toHaveTitle(/Sauce Visual/);

// Call `visualCheck` using the fixture and optionally apply any additional
// options as the second argument.
Expand All @@ -136,8 +138,8 @@ import { sauceVisualCheck } from '@saucelabs/visual-playwright';

// Expose the `testInfo` argument here ▼ -------
test('has title', async ({ page }, testInfo) => {
await page.goto('https://docs.saucelabs.com/visual-testing/integrations/playwright/');
await expect(page).toHaveTitle(/Playwright/);
await page.goto('https://docs.saucelabs.com/visual-testing/');
await expect(page).toHaveTitle(/Sauce Visual/);

// Pass the current page object and test info into the `sauceVisualCheck` call, and optionally
// customize the options via the fourth argument.
Expand Down Expand Up @@ -174,3 +176,7 @@ These options can be defined globally during fixture initialization (see [Step 3
| `delay` | `number` | `0` (no delay) | A number, in ms, that we should delay before taking the snapshot. |
| `ignoreRegions` | `(RegionIn \| string)[]` | `[]` (empty) | An array of manually created ignore regions, or CSS selectors in string form to ignore. |
| `diffingMethod` | `DiffingMethod` | `DiffingMethod.Balanced` | The diffing method from the backend that we should use when performing visual differences. This can be customized by using the `DiffingMethod` enum exported from our `@saucelabs/visual` package. |

## Example

An example project is available in our [visual examples repository](https://github.com/saucelabs/visual-examples/tree/main/playwright-js).