1.2.0 • Published 2 years ago
@microsoft/atlas-integration v1.2.0
Atlas Integration Testing
This folder provides the basis for all integration testing against Atlas. Atlas is primarily a CSS framework, and we are not seeking to test CSS itself. We use two methods of integration testing here.
- Visual regression testing (visual diff) against our site's component pages - a work in progress. See config and entry point.
- Assertion style testing of interactions (integration-tests) for elements and behaviors in the
atlas-jspackage. See config and example.
Installation
You must install Playwright and its dependencies on your machine before using any commands.
npx playwright installUsing Playwright
Both of the above use @playwright/test. Their documentaton should be the primary source of information on how to write tests here. Because of our monorepo setup, we've taken the approach of referencing playwright commands via npm. The primary commands available at the root of the project are:
| Command | Referent | Description |
|---|---|---|
npm run integration-tests | playwright test --config=integration-tests.config.ts | Runs all tests in the /integration-tests folder. |
npm run integration-tests:debug | playwright test --debug --config=integration-tests.config.ts | The same as above but in Playwright debug mode. |
npm run codegen | playwright codegen localhost:1111 | Runs Playwright codegen for integration-tests. Must have local server running on port 1111 before starting. |
screenshots:light | playwright test --config=visual-diff.config.ts | Take screenshots of images on light theme. Primarily for use on Github Actions. |
screenshots:all | cross-env FULL_DIFF=true playwright test --config=visual-diff.config.ts | Take screenshots of images on light, dark, and high-contrast themes. Primarily for use on Github Actions. |