test: update creevey to 0.10.0-beta.13, migrate to Selenium Grid 4

package.json

@@ -32,8 +32,5 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
-  },
-  "resolutions": {
-    "selenium-webdriver": "4.0.0-beta.4"
   }
 }

packages/react-ui-validations/.creevey/config.mts

@@ -0,0 +1,51 @@
+import path from 'path'
+import { fileURLToPath } from 'url';
+import { config as dotenv } from 'dotenv';
+import { hybridStoriesProvider, CreeveyConfig } from 'creevey';
+import { SeleniumWebdriver } from 'creevey/selenium';
+import { storybookUrl, resolveStorybookUrl } from './storybook-url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+dotenv({ path: '../../.env' });
+
+/**
+ * Debugging instructions: https://wiki.skbkontur.ru/pages/viewpage.action?pageId=418699157
+ * Instructions for Windows nodes: https://git.skbkontur.ru/ke/keweb.front/-/blob/f25788b0c0fce83b762e1b51553683e4d30484bd/.creevey/readme.md#debug
+ */
+
+const debug = process.env.DEBUG_SCREENSHOTS;
+
+const capabilities = debug
+  ? {
+      enableVNC: true,
+      enableVideo: true,
+    }
+  : {};
+
+const config: CreeveyConfig = {
+  storybookUrl,
+  resolveStorybookUrl,
+  webdriver: SeleniumWebdriver,
+  storiesProvider: hybridStoriesProvider,
+  testsRegex: /.creevey.(m|c)?(t|j)s$/,
+  testsDir: path.join(__dirname, '../'),
+  reportDir: path.join(__dirname, 'report'),
+  screenDir: path.join(__dirname, 'images'),
+  gridUrl: process.env.GRID_4_URL,
+  maxRetries: process.env.TEAMCITY_VERSION ? 5 : 0,
+  diffOptions: { threshold: 0, includeAA: false },
+  browsers: {
+    chromeDefault: {
+      browserName: 'chrome',
+      seleniumCapabilities: {
+        platformName: 'linux',
+        browserVersion: '127.0',
+        ...capabilities,
+      },
+      viewport: { width: 1024, height: 720 },
+    },
+  },
+};
+
+export default config;

packages/react-ui-validations/.creevey/storybook-url.js

@@ -0,0 +1,9 @@
+require('dotenv').config({ path: '../../.env' });
+
+const axios = require('axios');
+
+const port = 6060;
+
+exports.storybookUrl = `http://localhost:${port}`;
+exports.resolveStorybookUrl =
+  process.env.GET_IP_URL ? (() => axios(process.env.GET_IP_URL).then((res) => `http://${res.data}:${port}`)) : undefined;

packages/react-ui-validations/package.json

@@ -32,8 +32,8 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:pack": "tsc -p check-dts.tsconfig.json && jest --testMatch ** --testPathPattern=\\\"scripts/check-pack-files.js\\\"",
-    "creevey": "node ../../scripts/creevey-prepare.js .creevey/config.js && creevey -c .creevey/config.js",
-    "creevey:update": "creevey -c .creevey/config.js --update",
+    "creevey": "node ../../scripts/creevey-prepare.js .creevey/config.mts && creevey -c .creevey/config.mts",
+    "creevey:update": "creevey -c .creevey/config.mts --update",
     "creevey:ui": "yarn creevey --ui"
   },
   "main": "./index.js",
@@ -96,7 +96,7 @@
     "babel-loader": "^9.1.3",
     "babel-plugin-search-and-replace": "1.1.1",
     "core-js": "^3.37.1",
-    "creevey": "0.9.0-beta.12",
+    "creevey": "0.10.0-beta.13",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
     "dts-bundle": "^0.7.3",
@@ -121,6 +121,7 @@
     "rimraf": "^5.0.7",
     "rollup": "^4.18.0",
     "rollup-plugin-typescript2": "^0.36.0",
+    "selenium-webdriver": "^4.27.0",
     "serve": "^13.0.2",
     "shelljs": "^0.8.3",
     "storybook": "7.6.18",

packages/react-ui-validations/stories/__creevey__/Input.creevey.mts

@@ -0,0 +1,20 @@
+import { story, kind, test } from 'creevey';
+
+kind('Input', () => {
+  story('TooltipTopLeft', () => {
+    test('invalidTooltip', async (context) => {
+      const input = await context.webdriver.findElement({ css: '.react-ui-1xb4xgu' });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(input)
+        .sendKeys('test')
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .click(input)
+        .pause(500)
+        .perform();
+      await context.matchImage(await context.takeScreenshot());
+    });
+  });
+});

packages/react-ui-validations/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["./src/**/*", "./docs/**/*", "./typings/**/*", "../react-ui/typings/**/*"],
   "compilerOptions": {
-    "types": ["node", "jest", "@testing-library/jest-dom"],
+    "types": ["node", "jest", "@testing-library/jest-dom", "creevey/selenium"],
     "useUnknownInCatchVariables": false,
     "moduleResolution": "Node"
   }