diff --git a/playwright/README.md b/playwright/README.md index 5ebedee56d..92ff78b6c3 100644 --- a/playwright/README.md +++ b/playwright/README.md @@ -6,72 +6,72 @@ 2. Inside the component folder, create the `__tests__` folder and create a file inside it with the following name `.visual.test.tsx` 3. Writing a test: -Take a screenshot by default, takes a screenshot in a light theme + Capture a screenshot, by default in light theme only: -```ts -import React from 'react'; + ```ts + import React from 'react'; -import {expect} from '@playwright/experimental-ct-react'; + import {expect} from '@playwright/experimental-ct-react'; -import {MyTestedComponent} from '../MyTestedComponent'; + import {MyComponent} from '../MyComponent'; -import {test} from '~playwright/core'; + import {test} from '~playwright/core'; -test('Name test', async ({mount}) => { - //mounting a component - const component = await mount(); + test('test description', async ({mount}) => { + // mount the component + const component = await mount(); - //screenshot - await expect(component).toHaveScreenshot(); -}); -``` + // capture the screenshot + await expect(component).toHaveScreenshot(); + }); + ``` -You can also take screenshots in dark and light themes + You can also capture screenshots both in dark and light themes: -```ts -import React from 'react'; + ```ts + import React from 'react'; -import {MyTestedComponent} from '../MyTestedComponent'; + import {MyComponent} from '../MyComponent'; -import {test} from '~playwright/core'; + import {test} from '~playwright/core'; -test('Name test', async ({mount, expectScreenshot}) => { - //mounting a component - await mount(); + test('test description', async ({mount, expectScreenshot}) => { + // mount the component + await mount(); - //screenshot - await expectScreenshot(); -}); -``` + // capture the screenshot + await expectScreenshot(); + }); + ``` -or if you need to do any actions on the component + If you need to do any actions with the component: -```ts -import React from 'react'; + ```ts + import React from 'react'; -import {MyTestedComponent} from '../MyTestedComponent'; + import {MyComponent} from '../MyComponent'; -import {test} from '~playwright/core'; + import {test} from '~playwright/core'; -test('Name test', async ({mount, expectScreenshot}) => { - //mounting a component - const component = await mount(); + test('test description', async ({mount, expectScreenshot}) => { + // mount the component + const component = await mount(); - //screenshot - await expectScreenshot({component}); -}); -``` + // capture the screenshot + await expectScreenshot({component}); + }); + ``` -Group of tests. + Group of tests. -```ts -test.describe('Name group tests', () => { - test('1', ...); - test('2', ...); - ... - test('10', ...) -}); -``` + ```ts + test.describe('Name group tests', () => { + test('1', ...); + test('2', ...); + ... + test('10', ...) + }); + ``` 4. Run tests @@ -90,15 +90,15 @@ test.describe('Name group tests', () => { 5. Update screenshots if needed -```shell -npm run playwright:update -``` + ```shell + npm run playwright:update + ``` -Or + Or -```shell -npm run playwright:docker:update -``` + ```shell + npm run playwright:docker:update + ``` 6. In the folder `__snapshots__`, which is on the same level as the `__tests__` folder, the folder `.visual.test.tsx-snapshots`, will contain screenshots diff --git a/playwright/core/expectScreenshotFixture.ts b/playwright/core/expectScreenshotFixture.ts index 579bea5651..065cb55bee 100644 --- a/playwright/core/expectScreenshotFixture.ts +++ b/playwright/core/expectScreenshotFixture.ts @@ -16,7 +16,7 @@ export const expectScreenshotFixture: PlaywrightFixture const root = page.locator('#root'); await root.evaluate((el, theme) => { - el.classList.value = `g-root ${theme}`; + el.classList.value = `g-root g-root_theme_${theme}`; }, theme); return (component || page.locator('.playwright-wrapper-test')).screenshot({ @@ -27,11 +27,11 @@ export const expectScreenshotFixture: PlaywrightFixture const nameScreenshot = testInfo.titlePath.slice(1).join(' '); - expect(await captureScreenshot('g-root_theme_dark')).toMatchSnapshot({ + expect(await captureScreenshot('dark')).toMatchSnapshot({ name: `${screenshotName || nameScreenshot} dark.png`, }); - expect(await captureScreenshot('g-root_theme_light')).toMatchSnapshot({ + expect(await captureScreenshot('light')).toMatchSnapshot({ name: `${screenshotName || nameScreenshot} light.png`, }); };