test(Playwright): update version playwright (#1448)

package.json

@@ -120,8 +120,8 @@
         "@gravity-ui/prettier-config": "^1.1.0",
         "@gravity-ui/stylelint-config": "^4.0.1",
         "@gravity-ui/tsconfig": "^1.0.0",
-        "@playwright/experimental-ct-react": "1.38.1",
-        "@playwright/test": "1.38.1",
+        "@playwright/experimental-ct-react": "^1.42.1",
+        "@playwright/test": "^1.42.1",
         "@storybook/addon-a11y": "^7.6.13",
         "@storybook/addon-essentials": "^7.6.10",
         "@storybook/cli": "^7.6.10",

playwright/core/expectScreenshotFixture.ts

@@ -15,7 +15,7 @@ export const expectScreenshotFixture: PlaywrightFixture<ExpectScreenshotFixture>
         const captureScreenshot = async (theme: string) => {
             const root = page.locator('#root');
 
-            await root.evaluate((el, newTheme) => {
+            await root.evaluate((el: HTMLElement | SVGElement, newTheme: string) => {
                 el.setAttribute('class', `g-root g-root_theme_${newTheme}`);
             }, theme);
 

playwright/core/types.ts

@@ -1,4 +1,5 @@
-import type {ComponentFixtures} from '@playwright/experimental-ct-react';
+import type {JsonObject} from '@playwright/experimental-ct-core/types/component';
+import type {MountOptions, MountResult} from '@playwright/experimental-ct-react';
 import type {
     Locator,
     PageScreenshotOptions,
@@ -9,6 +10,13 @@ import type {
     TestFixture,
 } from '@playwright/test';
 
+interface ComponentFixtures {
+    mount<HooksConfig extends JsonObject>(
+        component: JSX.Element,
+        options?: MountOptions<HooksConfig>,
+    ): Promise<MountResult>;
+}
+
 type PlaywrightTestFixtures = PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures;
 type PlaywrightWorkerFixtures = PlaywrightWorkerArgs & PlaywrightWorkerOptions;
 type PlaywrightFixtures = PlaywrightTestFixtures & PlaywrightWorkerFixtures;

scripts/playwright-docker.sh

@@ -3,7 +3,7 @@
 set -euo pipefail
 
 IMAGE_NAME="mcr.microsoft.com/playwright"
-IMAGE_TAG="v1.38.1-jammy" # This version have to be synchronized with playwright version from package.json
+IMAGE_TAG="v1.42.1-jammy" # This version have to be synchronized with playwright version from package.json
 
 NODE_MODULES_CACHE_DIR="$HOME/.cache/uikit-playwright-docker-node-modules"
 

src/components/Avatar/__tests__/Avatar.visual.test.tsx

@@ -4,49 +4,49 @@ import {expect} from '@playwright/experimental-ct-react';
 
 import {test} from '~playwright/core';
 
-import {Icon, Image, ImageFallback, Showcase, Text, TextInitials, WithBorder} from './stories';
+import {AvatarStories} from './stories';
 
 test.describe('Avatar', () => {
     test('render story: <Image>', async ({mount}) => {
-        const component = await mount(<Image />);
+        const component = await mount(<AvatarStories.Image />);
 
         await expect(component).toHaveScreenshot();
     });
 
     test('render story: <ImageFallback>', async ({mount, browserName}) => {
         test.skip(browserName === 'webkit', 'Test is flaky for webkit');
 
-        const component = await mount(<ImageFallback />);
+        const component = await mount(<AvatarStories.ImageFallback />);
 
         await expect(component).toHaveScreenshot();
     });
 
     test('render story: <Icon>', async ({mount}) => {
-        const component = await mount(<Icon />);
+        const component = await mount(<AvatarStories.Icon />);
 
         await expect(component).toHaveScreenshot();
     });
 
     test('render story: <Text>', async ({mount}) => {
-        const component = await mount(<Text />);
+        const component = await mount(<AvatarStories.Text />);
 
         await expect(component).toHaveScreenshot();
     });
 
     test('render story: <TextInitials>', async ({mount}) => {
-        const component = await mount(<TextInitials />);
+        const component = await mount(<AvatarStories.TextInitials />);
 
         await expect(component).toHaveScreenshot();
     });
 
     test('render story: <WithBorder>', async ({mount}) => {
-        const component = await mount(<WithBorder />);
+        const component = await mount(<AvatarStories.WithBorder />);
 
         await expect(component).toHaveScreenshot();
     });
 
     test('render story: <Showcase>', async ({mount}) => {
-        const component = await mount(<Showcase />);
+        const component = await mount(<AvatarStories.AvatarShowcase />);
 
         await expect(component).toHaveScreenshot();
     });

src/components/Avatar/__tests__/stories.ts

@@ -2,12 +2,4 @@ import {composeStories} from '@storybook/react';
 
 import * as Stories from '../__stories__/Avatar.stories';
 
-export const {
-    Image,
-    ImageFallback,
-    Icon,
-    Text,
-    TextInitials,
-    WithBorder,
-    AvatarShowcase: Showcase,
-} = composeStories(Stories);
+export const AvatarStories = composeStories(Stories);

src/components/Button/__tests__/Button.visual.test.tsx

@@ -2,83 +2,71 @@ import React from 'react';
 
 import {test} from '~playwright/core';
 
-import {
-    Default,
-    Disabled,
-    Icon,
-    InsideText,
-    Link,
-    Loading,
-    Pin,
-    Selected,
-    Size,
-    View,
-    Width,
-} from './helpersPlaywright';
+import {ButtonStories} from './helpersPlaywright';
 
 test.describe('Button', () => {
     test('render story: <Default>', async ({mount, expectScreenshot}) => {
-        await mount(<Default />);
+        await mount(<ButtonStories.Default />);
 
         await expectScreenshot();
     });
 
     test('render story: <Selected>', async ({mount, expectScreenshot}) => {
-        await mount(<Selected />);
+        await mount(<ButtonStories.Selected />);
 
         await expectScreenshot();
     });
 
     test('render story: <Size>', async ({mount, expectScreenshot}) => {
-        await mount(<Size />);
+        await mount(<ButtonStories.Size />);
 
         await expectScreenshot();
     });
 
     test('render story: <Icon>', async ({mount, expectScreenshot}) => {
-        await mount(<Icon />);
+        await mount(<ButtonStories.Icon />);
 
         await expectScreenshot();
     });
 
     test('render story: <View>', async ({mount, expectScreenshot}) => {
-        await mount(<View />);
+        await mount(<ButtonStories.View />);
 
         await expectScreenshot();
     });
 
     test('render story: <Disabled>', async ({mount, expectScreenshot}) => {
-        await mount(<Disabled />);
+        await mount(<ButtonStories.Disabled />);
 
         await expectScreenshot();
     });
 
     test('render story: <Link>', async ({mount, expectScreenshot}) => {
-        await mount(<Link />);
+        await mount(<ButtonStories.Link />);
 
         await expectScreenshot();
     });
 
     test('render story: <Loading>', async ({mount, expectScreenshot}) => {
-        await mount(<Loading />);
+        await mount(<ButtonStories.Loading />);
 
         await expectScreenshot();
     });
 
     test('render story: <Pin>', async ({mount, expectScreenshot}) => {
-        await mount(<Pin />);
+        await mount(<ButtonStories.Pin />);
 
         await expectScreenshot();
     });
 
     test('render story: <Width>', async ({mount, expectScreenshot}) => {
-        await mount(<Width />);
+        await mount(<ButtonStories.Width />);
 
         await expectScreenshot();
     });
 
     test('render story: <InsideText>', async ({mount, expectScreenshot}) => {
-        await mount(<InsideText />);
+        await mount(<ButtonStories.InsideText />);
 
         await expectScreenshot();
     });

src/components/Button/__tests__/helpersPlaywright.ts

@@ -1,17 +1,5 @@
 import {composeStories} from '@storybook/react';
 
-import * as ButtonStories from '../__stories__/Button.stories';
+import * as DefaultButtonStories from '../__stories__/Button.stories';
 
-export const {
-    Default,
-    Selected,
-    Size,
-    View,
-    Icon,
-    Disabled,
-    Loading,
-    Width,
-    Pin,
-    Link,
-    InsideText,
-} = composeStories(ButtonStories);
+export const ButtonStories = composeStories(DefaultButtonStories);

src/components/Label/__tests__/Label.visual.test.tsx

@@ -1,80 +1,67 @@
 import React from 'react';
 
-import {expect} from '@playwright/experimental-ct-react';
-
 import {test} from '~playwright/core';
 
-import {
-    Close,
-    Copy,
-    Default,
-    Icon,
-    Interactive,
-    LinkWrapper,
-    ShowcaseStory,
-    Size,
-    Theme,
-    Value,
-} from './helpersPlaywright';
+import {LabelStories} from './helpersPlaywright';
 
 test.describe('Label', () => {
-    test('render story: <Default>', async ({mount}) => {
-        const component = await mount(<Default />);
+    test('render story: <Default>', async ({mount, expectScreenshot}) => {
+        await mount(<LabelStories.Default />);
 
-        await expect(component).toHaveScreenshot();
+        await expectScreenshot();
     });
 
-    test('render story: <Theme>', async ({mount}) => {
-        const component = await mount(<Theme />);
+    test('render story: <Theme>', async ({mount, expectScreenshot}) => {
+        await mount(<LabelStories.Theme />);
 
-        await expect(component).toHaveScreenshot();
+        await expectScreenshot();
     });
 
-    test('render story: <Size>', async ({mount}) => {
-        const component = await mount(<Size />);
+    test('render story: <Size>', async ({mount, expectScreenshot}) => {
+        await mount(<LabelStories.Size />);
 
-        await expect(component).toHaveScreenshot();
+        await expectScreenshot();
     });
 
-    test('render story: <Icon>', async ({mount}) => {
-        const component = await mount(<Icon />);
+    test('render story: <Icon>', async ({mount, expectScreenshot}) => {
+        await mount(<LabelStories.Icon />);
 
-        await expect(component).toHaveScreenshot();
+        await expectScreenshot();
     });
 
-    test('render story: <Interactive>', async ({mount}) => {
-        const component = await mount(<Interactive />);
+    test('render story: <Interactive>', async ({mount, expectScreenshot}) => {
+        await mount(<LabelStories.Interactive />);
 
-        await expect(component).toHaveScreenshot();
+        await expectScreenshot();
     });
 
-    test('render story: <LinkWrapper>', async ({mount}) => {
-        const component = await mount(<LinkWrapper />);
+    test('render story: <LinkWrapper>', async ({mount, expectScreenshot}) => {
+        await mount(<LabelStories.LinkWrapper />);
 
-        await expect(component).toHaveScreenshot();
+        await expectScreenshot();
     });
 
-    test('render story: <ShowcaseStory>', async ({mount}) => {
-        const component = await mount(<ShowcaseStory />);
+    test('render story: <ShowcaseStory>', async ({mount, expectScreenshot}) => {
+        await mount(<LabelStories.ShowcaseStory />);
 
-        await expect(component).toHaveScreenshot();
+        await expectScreenshot();
     });
 
-    test('render story: <Value>', async ({mount}) => {
-        const component = await mount(<Value />);
+    test('render story: <Value>', async ({mount, expectScreenshot}) => {
+        await mount(<LabelStories.Value />);
 
-        await expect(component).toHaveScreenshot();
+        await expectScreenshot();
     });
 
-    test('render story: <Copy>', async ({mount}) => {
-        const component = await mount(<Copy />);
+    test('render story: <Copy>', async ({mount, expectScreenshot}) => {
+        await mount(<LabelStories.Copy />);
 
-        await expect(component).toHaveScreenshot();
+        await expectScreenshot();
     });
 
-    test('render story: <Close>', async ({mount}) => {
-        const component = await mount(<Close />);
+    test('render story: <Close>', async ({mount, expectScreenshot}) => {
+        await mount(<LabelStories.Close />);
 
-        await expect(component).toHaveScreenshot();
+        await expectScreenshot();
     });
 });

src/components/Label/__tests__/helpersPlaywright.ts

@@ -1,16 +1,5 @@
 import {composeStories} from '@storybook/react';
 
-import * as LabelStories from '../__stories__/Label.stories';
+import * as DefaultLabelStories from '../__stories__/Label.stories';
 
-export const {
-    Default,
-    Theme,
-    Size,
-    Interactive,
-    Icon,
-    Close,
-    Copy,
-    Value,
-    LinkWrapper,
-    ShowcaseStory,
-} = composeStories(LabelStories);
+export const LabelStories = composeStories(DefaultLabelStories);