Skip to content

Commit

Permalink
fix: readme and theme
Browse files Browse the repository at this point in the history
  • Loading branch information
NasgulNexus committed Dec 22, 2023
1 parent 1c16aef commit 30a1ccb
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 56 deletions.
106 changes: 53 additions & 53 deletions playwright/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,72 +6,72 @@
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:

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(<MyTestedComponent props={props} />);
test('test description', async ({mount}) => {
// mount the component
const component = await mount(<MyComponent props={props} />);

//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(<MyTestedComponent props={props} />);
test('test description', async ({mount, expectScreenshot}) => {
// mount the component
await mount(<MyComponent props={props} />);

//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(<MyTestedComponent props={props} />);
test('test description', async ({mount, expectScreenshot}) => {
// mount the component
const component = await mount(<MyComponent props={props} />);

//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

Expand All @@ -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 `<Component name>.visual.test.tsx-snapshots`, will contain screenshots

Expand Down
6 changes: 3 additions & 3 deletions playwright/core/expectScreenshotFixture.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const expectScreenshotFixture: PlaywrightFixture<ExpectScreenshotFixture>
const root = page.locator('#root');

await root.evaluate((el, theme) => {

Check warning on line 18 in playwright/core/expectScreenshotFixture.ts

View workflow job for this annotation

GitHub Actions / Verify Files

'theme' is already declared in the upper scope on line 15 column 42
el.classList.value = `g-root ${theme}`;
el.classList.value = `g-root g-root_theme_${theme}`;

Check warning on line 19 in playwright/core/expectScreenshotFixture.ts

View workflow job for this annotation

GitHub Actions / Verify Files

Assignment to property of function parameter 'el'
}, theme);

return (component || page.locator('.playwright-wrapper-test')).screenshot({
Expand All @@ -27,11 +27,11 @@ export const expectScreenshotFixture: PlaywrightFixture<ExpectScreenshotFixture>

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`,
});
};
Expand Down

0 comments on commit 30a1ccb

Please sign in to comment.