Skip to content

Commit

Permalink
minor updates, add visual examples link
Browse files Browse the repository at this point in the history
  • Loading branch information
Logan Graham committed Sep 10, 2024
1 parent beebf45 commit b758d76
Showing 1 changed file with 11 additions and 5 deletions.
16 changes: 11 additions & 5 deletions docs/visual-testing/integrations/playwright.md
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 repo](https://github.com/saucelabs/visual-examples/tree/main/playwright-js).

Check warning on line 182 in docs/visual-testing/integrations/playwright.md

View workflow job for this annotation

GitHub Actions / vale

[vale] docs/visual-testing/integrations/playwright.md#L182

[sauce.WordList] Use 'repository' instead of 'repo'.
Raw output
{"message": "[sauce.WordList] Use 'repository' instead of 'repo'.", "location": {"path": "docs/visual-testing/integrations/playwright.md", "range": {"start": {"line": 182, "column": 57}}}, "severity": "WARNING"}

0 comments on commit b758d76

Please sign in to comment.