From 742df1f5a2a679630a6d9dc277f57f005f10623d Mon Sep 17 00:00:00 2001 From: Logan Graham Date: Tue, 10 Sep 2024 14:54:07 -0400 Subject: [PATCH 1/2] minor updates, add visual examples link --- docs/visual-testing/integrations/playwright.md | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/docs/visual-testing/integrations/playwright.md b/docs/visual-testing/integrations/playwright.md index 5c02a69e86..165af8950a 100644 --- a/docs/visual-testing/integrations/playwright.md +++ b/docs/visual-testing/integrations/playwright.md @@ -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. @@ -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. @@ -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. @@ -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). From ed98870945f95bf5cb0e36bf67e3ba2bb8029e90 Mon Sep 17 00:00:00 2001 From: Logan Graham Date: Wed, 11 Sep 2024 08:41:49 -0400 Subject: [PATCH 2/2] lint fix --- docs/visual-testing/integrations/playwright.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/visual-testing/integrations/playwright.md b/docs/visual-testing/integrations/playwright.md index 165af8950a..fe8a2f88d2 100644 --- a/docs/visual-testing/integrations/playwright.md +++ b/docs/visual-testing/integrations/playwright.md @@ -179,4 +179,4 @@ These options can be defined globally during fixture initialization (see [Step 3 ## Example -An example project is available in our [visual examples repo](https://github.com/saucelabs/visual-examples/tree/main/playwright-js). +An example project is available in our [visual examples repository](https://github.com/saucelabs/visual-examples/tree/main/playwright-js).