Merge pull request #304 from chromaui/todd/update-e2e-configuration

Add E2E test configuration options
chromaui · Nov 3, 2023 · 52c389a · 52c389a · github-actions · Nov 3, 2023
2 parents 7372a62 + aba0239
commit 52c389a
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 5 deletions.
diff --git a/src/content/notInNavigation/e2e-visual-tests.md b/src/content/notInNavigation/e2e-visual-tests.md
@@ -268,13 +268,97 @@ Now you can run the Archive Storybook with the `archive-storybook` command, and
 yarn archive-storybook
 ```
 
-## Settings
+## Configuration
 
-You can further configure the Test Archiver with these settings:
+You can further configure the Test Archiver with the options described in the following sections.
 
-### `CHROMATIC_ARCHIVE_LOCATION`
+### Setting options using Playwright
+
+The Chromatic [Playwright Fixture](https://playwright.dev/docs/test-fixtures) can be configured with `use` like all [Playwright options](https://playwright.dev/docs/test-use-options).
+
+Setting options globally can be done in your `playwright.config.js` as follows:
+
+```javascript
+// playwright.config.js
+
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  use: {
+    // ... your other options
+
+    // 👇 your global options
+    disableAutoCapture: true,
+  },
+  // ... your other configuration
+});
+```
+
+Options can also be overridden at the test level:
+
+```javascript
+// mytest.spec.js
+
+test.describe('some block', () => {
+
+  // 👇 your option overrides
+  test.use({ disableAutoCapture: true });
+
+  test('some test', async ({ page }) => {
+    // ...
+  });
+});
+```
+
+If you're using TypeScript, the options can be typed:
+
+```typescript
+// playwright.config.ts
+
+import { ChromaticConfig } from '@chromaui/test-archiver';
+
+export default defineConfig<ChromaticConfig>({
+  use: {
+    // ... your other options
+
+     // 👇 your option overrides
+    disableAutoCapture: true,
+  },
+  // ... your other configuration
+});
+```
+
+### E2E options
+
+These options control how the Chromatic archive fixture behaves.
+
+| Option                   | Type      | Description                                                                                                                  |
+|--------------------------|-----------|------------------------------------------------------------------------------------------------------------------------------|
+| `disableAutoCapture`     | `boolean` | When `true`, will disable the capture that happens automatically at the end of a test when using the Chromatic test fixture. |
+| `resourceArchiveTimeout` | `number`  | Maximum amount of time that each test will wait for the network to be idle while archiving resources.                        |
+
+### Chromatic options
+
+These options control how Chromatic behaves concerning the stories of your archives.
+
+| Option                    | Type      | Chromatic Docs                                                                |
+|---------------------------|-----------|----------------------------------------------------------------------------|
+| `delay`                   | `number`  | [Delay](/docs/delay/)                                           |
+| `diffIncludeAntiAliasing` | `boolean` | [Threshold for changes](/docs/threshold#anti-aliasing)                         |
+| `diffThreshold`           | `number`  | [Threshold for changes](/docs/threshold#setting-the-threshold)                 |
+| `forcedColors`            | `string`  | [Media Features](/docs/media-features#test-high-contrast-color-schemes) |
+| `pauseAnimationAtEnd`     | `boolean` | [Animations](/docs/animations#css-animations)                       |
+| `prefersReducedMotion`    | `string`  | [Media Features](/docs/media-features#verify-reduced-motion-animations) |
+
+
+### Environment variables
+
+Some options can be configured through environment variables.
+
+| Environment variable         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+|------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `CHROMATIC_ARCHIVE_LOCATION` | If you have configured your project's [`outputDir`](https://playwright.dev/docs/api/class-testproject#test-project-output-dir) option to be different than the default, you must set the `CHROMATIC_ARCHIVE_LOCATION` environment variable to the same value. This must be done when starting the Storybook and when building it on CI. This ensures that the Archive Storybook can find the [archives](#what-are-archives) generated by the Test Archiver. |
 
-If you have configured your project's [`outputDir`](https://playwright.dev/docs/api/class-testproject#test-project-output-dir) option to be different than the default, you must set the `CHROMATIC_ARCHIVE_LOCATION` environment variable (both when starting the Storybook and when building it on CI) to the same value. This ensures that the Archive Storybook can find the [archives](#what-are-archives) generated by the Test Archiver.
 
 ## Frequently asked questions
 

diff --git a/src/styles/formatting.ts b/src/styles/formatting.ts
@@ -272,7 +272,8 @@ export const formatting = css`
     overflow: hidden;
 
     a {
-      color: #026fb3;
+      // require !important to override base styles
+      color: #026fb3 !important;
     }
   }
   table tr {