diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 8478868..54b1d5f 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -30,8 +30,5 @@ jobs: - name: Prepare for Integration Tests run: npm run demo:build - - name: Install playwright browsers - run: npx playwright install chromium --with-deps - - name: Integration Tests run: npm run test:integrationOnly diff --git a/CHANGELOG.md b/CHANGELOG.md index 10fab44..cf94617 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +- [fix] Automatically install Chromium and add note about installing other browsers [#85](https://github.com/chanzuckerberg/axe-storybook-testing/pull/85) + # 7.1.2 (2023-08-07) - [fix] Update most deps [#82](https://github.com/chanzuckerberg/axe-storybook-testing/pull/82) diff --git a/README.md b/README.md index 7996cac..7a5ba43 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ This project adheres to the [Contributor Covenant code of conduct](https://www.c # via npm npm install --save-dev @chanzuckerberg/axe-storybook-testing -# or, if using Yarn +# or with Yarn yarn add --dev @chanzuckerberg/axe-storybook-testing ``` @@ -49,27 +49,23 @@ yarn add --dev @chanzuckerberg/axe-storybook-testing To use: -1. Create a static Storybook build. Normally you'll do this with the [`storybook build` command](https://storybook.js.org/docs/react/api/cli-options#build). -2. Run `axe-storybook`, which will analyze the static build. - -To make this as easy as possible to use, we recommend adding a script to your package.json that does this in one step. - -```jsonc -// In package.json -"scripts": { - "storybook:axe": "storybook build && axe-storybook" -}, -``` - -Then you can run the tests with - -```sh -# If using npm -npm run storybook:axe - -# or, if using Yarn -yarn storybook:axe -``` +1. Add a script that creates a storybook build and then executes the axe-storybook command + ```jsonc + // In package.json + "scripts": { + "test:axe": "storybook build && axe-storybook" + }, + ``` + +2. Run the tests by calling the script from the previous step + ```sh + npm run test:axe + ``` + +3. (Optional) Install more browsers. By default Chromium is installed. If you want to also use Firefox and/or Safari, install them with: + ```sh + npx playwright install + ``` ## Options diff --git a/package-lock.json b/package-lock.json index 78c35ee..3e2f400 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "demo" ], "dependencies": { + "@playwright/browser-chromium": "^1.39.0", "http-server": "^14.1.1", "indent-string": "^4.0.0", "lodash": "^4.17.21", @@ -3549,6 +3550,18 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/@playwright/browser-chromium": { + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/@playwright/browser-chromium/-/browser-chromium-1.39.0.tgz", + "integrity": "sha512-s1WPO0qOE7PIZcdcJEd4CHQgXf9rOwy00Den8DsXTI26n/Eqa2HzFSbLRE1Eh2nIJZFSGyKLbopHR0HkT8ClZw==", + "hasInstallScript": true, + "dependencies": { + "playwright-core": "1.39.0" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/@pmmmwh/react-refresh-webpack-plugin": { "version": "0.5.11", "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.11.tgz", diff --git a/package.json b/package.json index 70e083a..595e2d0 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "validate": "npm run lint && npm run types && npm run test" }, "dependencies": { + "@playwright/browser-chromium": "^1.39.0", "http-server": "^14.1.1", "indent-string": "^4.0.0", "lodash": "^4.17.21",