README.md

Playwright Test Component

How to write a test

1. Select the component you want to write tests for

2. Inside the component folder, create the __tests__ folder and create a file inside it with the following name <ComponentName>.visual.test.tsx

3. Writing a test:

   NOTE: Add await defaultDelay() between mounting and testing routine in every test with animation. It is necessary because of testing during animation in progress is unstable.

   Capture a screenshot, by default in light theme only:

   import React from 'react';
   
   import {expect} from '@playwright/experimental-ct-react';
   
   import {MyComponent} from '../MyComponent';
   
   import {test} from '~playwright/core';
   
   test('test description', async ({page, mount, defaultDelay}) => {
     // mount the component
     const component = await mount(<MyComponent props={props} />);
   
     // default delay to bypass animation issues
     await defaultDelay();
   
     // capture the screenshot
     await expect(component).toHaveScreenshot();
   });

   You can also capture screenshots both in dark and light themes:

   import React from 'react';
   
   import {MyComponent} from '../MyComponent';
   
   import {test} from '~playwright/core';
   
   test('test description', async ({page, mount, expectScreenshot, defaultDelay}) => {
     // mount the component
     await mount(<MyComponent props={props} />);
   
     // default delay to bypass animation issues
     await defaultDelay();
   
     // capture the screenshot
     await expectScreenshot();
   });

   If you need to do any actions with the component:

   import React from 'react';
   
   import {MyComponent} from '../MyComponent';
   
   import {test} from '~playwright/core';
   
   test('test description', async ({page, mount, expectScreenshot, defaultDelay}) => {
     // mount the component
     const component = await mount(<MyComponent props={props} />);
   
     // default delay to bypass animation issues
     await defaultDelay();
   
     // the action
     await component.click();
   
     // capture the screenshot
     await expectScreenshot({component});
   });

   Group of tests.

   test.describe('Name group tests', () => {
     test('1', ...);
     test('2', ...);
     ...
     test('10', ...)
   });

4. Run tests

   npm run playwright:install
   npm run playwright

   If you are using system other than Linux, then you need to run tests via docker command:

   npm run playwright:docker

   npm run playwright:install command must be run only once on initial setup

5. Update screenshots if needed

   npm run playwright:update

   Or

   npm run playwright:docker:update

6. In the folder __snapshots__, which is on the same level as the __tests__ folder, the folder <Component name>.visual.test.tsx-snapshots, will contain screenshots

Description of possible commands:

1. playwright-test-components
2. playwright-docs
3. playwright-writing-tests

Test examples

• Button

Npm scripts

• npm run playwright:install - install playwright browsers and dependencies
• npm run playwright - run tests
• npm run playwright:update - update screenshots
• npm run playwright:clear-cache - clear cache vite
• npm run playwright:docker - run tests using docker
• npm run playwright:docker:update - update screenshots using docker
• npm run playwright:docker:clear-cache - clear node_modules cache for docker container and clear cache vite
• npx playwright show-report ./playwright-report-docker - show report