feat: add Playwright package for screenshot testing #327

Pavel-Tyan · 2024-11-06T16:41:23Z

No description provided.

martyanovandrey · 2024-11-07T09:35:15Z

package.json

@@ -51,7 +51,7 @@
    "deps:install": "npm ci",
    "deps:truncate": "npm prune --production",
    "typecheck": "tsc -p . --noEmit",
-    "test": "exit 0",
+    "test": "npx playwright test",


the launch of the storybook should happen before the playwright tests

If i run "npm run test", playwright runs the storybook before tests.
I configured it in playwright.config.ts (webServer property):
437c10b#diff-f679bf1e58e8dddfc6cff0fa37c8e755c8d2cfc9e6b5dc5520a5800beba59a92R14

martyanovandrey · 2024-11-07T09:37:24Z

tests/utils.ts

@@ -0,0 +1,3 @@
+export const URL_SEGMENT = 'http://localhost:6006/iframe.html?args=&id=';


maybe these are constants and not utilities

It is also necessary to make it so that the domain can be specified through an environment variable

martyanovandrey · 2024-11-07T09:39:33Z

package.json

@@ -51,7 +51,7 @@
    "deps:install": "npm ci",
    "deps:truncate": "npm prune --production",
    "typecheck": "tsc -p . --noEmit",
-    "test": "exit 0",
+    "test": "npx playwright test",


It is necessary to add a section about tests in the readme, how to run them and how to update them

Added more info about testing in README: fb2595c

martyanovandrey · 2024-11-07T09:40:37Z

playwright.config.ts

+    testDir: './tests',
+    fullyParallel: true,
+    forbidOnly: Boolean(process.env.CI),
+    retries: process.env.CI ? 2 : 0,


why is process.env.CI needed?

martyanovandrey · 2024-11-13T08:24:21Z

README.md

+
+`**.spec.ts` files contain test code.
+
+`**.spec.ts-snapshots` folders contain screenshots which are used for comparison with test screenshots. If screenshot is incorrect you can delete it and after the tests playwright will replace it with test screenshot.


to update screenshot you need to run
npx playwright test --update-snapshots

Commit: 10b491b

martyanovandrey · 2024-11-13T08:26:08Z

README.md

+
+### Preparation
+
+You need to add `.env` file in repository's root directory with the data below:


You need to add .env

This should not be necessary by default, tests should be started by this variable. It should be written that by default such and such domain is used, but if you want to change it, you can fix it through the environment variable.

Commit: eb75627

martyanovandrey · 2024-11-13T08:27:56Z

package.json

@@ -73,8 +73,10 @@
    "@gravity-ui/icons": "^2.5.0",
    "@gravity-ui/page-constructor": "^5.22.0",
    "@gravity-ui/uikit": "^6.2.0",
+    "@playwright/test": "^1.48.2",


dev dependency

Commits:
23a8be4
952eb85

martyanovandrey · 2024-11-13T08:28:44Z

package.json

    "@popperjs/core": "^2.11.2",
    "bem-cn-lite": "4.1.0",
+    "dotenv": "^16.4.5",


Also, it probably should be a development dependency.

martyanovandrey · 2024-11-13T09:00:15Z

tests/MiniToc/MiniToc.spec.ts-snapshots/MiniToc-navigation-chromium-win32.png

folder name for tests __tests__

Commit: b9a1629

martyanovandrey · 2024-11-13T09:03:27Z

tests/MiniToc/MiniToc.spec.ts

+test.beforeEach(async ({page}) => {
+    await page.goto(DOC_PAGE_URL);
+    await page.waitForSelector(ROOT_ELEMENT_SELECTOR);
+});


if you have repetitive actions before each test, then it is worth taking them out into a separate function for test setup in utils.ts and reusing them

Commit: b9bd607

martyanovandrey · 2024-11-20T16:30:31Z

.github/workflows/pr-visual-tests-report.yml

+    workflows: ['CI']
+    types:
+      - completed
+    branches: [test]


Add webServer property in config. Before starting the tests playwright will run and wait for the launch of storybook dev server (if storybook is not running). Server URL is stored in .env file. Dotenv package needs for reading URL from .env.

Change "utils.ts" to "constants.ts". Combined URL variables in "DOC_PAGE_URL" variable. Change snapshot for DocPage test to correct image (for Chrome).

If .env file with 'BASE_URL' variable doesn't exist, playwright will use 'http://localhost:6006' as base URL

Dotenv package was used in playwright config only to get env variable (BASE_URL). Now config gets variable from tests/constants.ts file.

Change playwright to dev dependency. Remove dotenv

Rename files with snapshots to "__screenshots__"

Function waits for fonts to load

Add pr-visual-tests-report.yml for test report. Move downloading browser files in separate stage.

Pavel-Tyan force-pushed the test branch from 8e44e4d to fad6a4a Compare November 6, 2024 17:02

martyanovandrey requested changes Nov 7, 2024

View reviewed changes

martyanovandrey reviewed Nov 14, 2024

View reviewed changes

martyanovandrey approved these changes Nov 19, 2024

View reviewed changes

Pavel-Tyan force-pushed the test branch from eb42cf6 to d3cee3c Compare November 19, 2024 15:12

martyanovandrey reviewed Nov 20, 2024

View reviewed changes

.github/workflows/pr-visual-tests-report.yml Outdated

workflows: ['CI']

types:

- completed

branches: [test]

Copy link

Contributor

martyanovandrey Nov 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

master

Pavel-Tyan added 24 commits November 20, 2024 19:54

feat: add playwright package for testing

85583fa

test: add screenshot test for DocPage

a656642

test: change filename with constants and DocPage test

d7cbb1d

Change "utils.ts" to "constants.ts". Combined URL variables in "DOC_PAGE_URL" variable. Change snapshot for DocPage test to correct image (for Chrome).

test: add navigation test for Minitoc

9ceb9d3

test: add Toc tests for dropdown links

b4d44ce

feat: add info about testing in README

f20bbc9

feat: add more info in README testing section

b93e5fd

refactor: extract DocPage loading into a separate function

88d8fe7

feat: add default storybook server URL for testing

fb24a74

If .env file with 'BASE_URL' variable doesn't exist, playwright will use 'http://localhost:6006' as base URL

feat: change playwright to dev dependency and remove dotenv

93d02ae

Dotenv package was used in playwright config only to get env variable (BASE_URL). Now config gets variable from tests/constants.ts file.

feat: rename folder with tests from 'tests' to '__tests__'

4297c98

feat: update package-lock.json

9c9f40a

Change playwright to dev dependency. Remove dotenv

feat: update test section in README

858a787

refactor: move test files in components

301d9f5

Rename files with snapshots to "__screenshots__"

feat: update test section info in README

45455be

feat: update dependencies

f630a42

feat: reinstall deps in package-lock.json files

01dee36

feat: change names of screenshots

721efc4

feat: update dependencies and test script

d7cb47d

feat: delete reference screenshots

714485f

feat: add reference screenshots and turn off parallel testing

f3bc5e8

feat: change test script in package.json

4c64380

feat: change test script in package.json

3f27d5a

Pavel-Tyan added 22 commits November 20, 2024 19:55

feat: add html report in CI

4aebd19

feat: change loadDocumentPage function for testing

95a5591

Function waits for fonts to load

feat: change CI and package.json

766181c

Add pr-visual-tests-report.yml for test report. Move downloading browser files in separate stage.

feat: update test section in README

8b4906b

feat: move test for CI in separate file

9533b12

feat: update yml file for test report

660fad6

feat: update test report file for CI

cd6c6ae

feat: change CI file for testing

bf1621b

feat: change CI file for testing

c6d95f9

feat: move test reports in separate job

99c83c1

feat: remove starting tests (CI) in docker

af3497a

feat: add build stage in test CI

fa480ad

feat: move testing to ci.yml file

811e098

feat: change CI test report file

55c2e48

feat: change branch name in test report file (CI)

2a36e1e

feat: change test script to check CI

b215b12

feat: change test report file to test CI

3babde8

feat: change test report file for testing CI

e735e77

feat: change test file for testing CI

daf939a

feat: remove redudant code for loadingPageDocument

307d19c

feat: disable test script

baeb3a4

feat: change branch in CI for testing

418b833

Pavel-Tyan force-pushed the test branch from e8b56b9 to 418b833 Compare November 20, 2024 16:59

martyanovandrey merged commit 61d9b97 into diplodoc-platform:master Nov 20, 2024
1 check passed

yc-ui-bot mentioned this pull request Nov 20, 2024

chore(master): release 4.19.0 #334

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add Playwright package for screenshot testing #327

feat: add Playwright package for screenshot testing #327

Pavel-Tyan commented Nov 6, 2024

martyanovandrey Nov 7, 2024

Pavel-Tyan Nov 13, 2024 •

edited

Loading

martyanovandrey Nov 7, 2024

martyanovandrey Nov 7, 2024

martyanovandrey Nov 7, 2024

Pavel-Tyan Nov 13, 2024

martyanovandrey Nov 7, 2024

martyanovandrey Nov 13, 2024

Pavel-Tyan Nov 14, 2024

martyanovandrey Nov 13, 2024

Pavel-Tyan Nov 14, 2024

martyanovandrey Nov 13, 2024

Pavel-Tyan Nov 14, 2024

martyanovandrey Nov 13, 2024

martyanovandrey Nov 13, 2024

Pavel-Tyan Nov 14, 2024

martyanovandrey Nov 13, 2024

Pavel-Tyan Nov 14, 2024

martyanovandrey Nov 20, 2024

		@@ -0,0 +1,3 @@
		export const URL_SEGMENT = 'http://localhost:6006/iframe.html?args=&id=';


		`**.spec.ts` files contain test code.

		`**.spec.ts-snapshots` folders contain screenshots which are used for comparison with test screenshots. If screenshot is incorrect you can delete it and after the tests playwright will replace it with test screenshot.


		### Preparation

		You need to add `.env` file in repository's root directory with the data below:

feat: add Playwright package for screenshot testing #327

feat: add Playwright package for screenshot testing #327

Conversation

Pavel-Tyan commented Nov 6, 2024

Choose a reason for hiding this comment

Pavel-Tyan Nov 13, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Pavel-Tyan Nov 13, 2024 •

edited

Loading