@tramvai/test-pw 2.59.0

package/README.md

@@ -0,0 +1,55 @@
+# Tramvai test Playwright
+
+Set of helpers for using [playwright](https://playwright.dev) in the integration tests
+
+> `Playwright` should be installed separately
+
+## Installation
+
+```bash
+npm i --save-dev @tramvai/test-pw
+```
+
+## How To
+
+### Tests in browser
+
+`Playwright` runs tests in headless Chrome browser, documentation can be found on [official site](https://pptr.dev/)
+
+```ts
+import { startCli } from '@tramvai/test-integration';
+import { initPlaywright, wrapPlaywrightPage } from '@tramvai/test-pw';
+
+beforeAll(async () => {
+  app = await startCli('bootstrap', {
+    env: {
+      SOME_ENV: 'test',
+    },
+  });
+}, 80000);
+
+afterAll(() => {
+  return app.close();
+});
+
+it('Playwright', async () => {
+  const { browser } = await initPlaywright(app.serverUrl);
+
+  const page = await browser.newPage();
+  const wrapper = wrapPlaywrightPage(page);
+
+  await page.goto(app.serverUrl);
+
+  expect(
+    await page.$eval('.application', (node) => (node as HTMLElement).innerText)
+  ).toMatchInlineSnapshot(`"Main Page click link"`);
+
+  await wrapper.router.navigate('./second');
+
+  expect(
+    await page.$eval('.application', (node) => (node as HTMLElement).innerText)
+  ).toMatchInlineSnapshot(`"Second Page click link"`);
+
+  await browser.close();
+});
+```

package/lib/constants.d.ts

@@ -0,0 +1,2 @@
+import type { LaunchOptions } from 'playwright-core';
+export declare const PLAYWRIGHT_DEFAULT_LAUNCH_OPTIONS: LaunchOptions;

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+export * from 'playwright-core';
+export * from './constants';
+export { initPlaywright } from './launch';
+export { wrapPlaywrightPage } from './wrapper';
+export * from './utils';

package/lib/index.es.js

@@ -0,0 +1,163 @@
+import { chromium } from 'playwright-core';
+export * from 'playwright-core';
+import { stderr } from 'supports-color';
+import consoleWithStyle from 'console-with-style';
+import { sleep } from '@tramvai/test-integration';
+
+const PLAYWRIGHT_DEFAULT_LAUNCH_OPTIONS = {
+    args: [
+        '--no-sandbox',
+        '--disable-setuid-sandbox',
+        '--disable-dev-shm-usage',
+        process.env.HTTPS_PROXY ? `--proxy-server=${process.env.HTTPS_PROXY}` : '',
+    ].filter(Boolean),
+    headless: process.env.HEADLESS !== 'false',
+    timeout: 60 * 3 * 1000,
+};
+
+const wrapRouter = (page) => {
+    const navigate = async (options) => {
+        return page.evaluate((navigateOptions) => {
+            return window.contextExternal.di.get('router pageService').navigate(navigateOptions);
+        }, options);
+    };
+    const navigateThenWaitForReload = async (options) => {
+        return Promise.all([
+            page.evaluate((navigateOptions) => {
+                window.contextExternal.di.get('router pageService').navigate(navigateOptions);
+            }, options),
+            page.waitForNavigation(),
+        ]);
+    };
+    const updateCurrentRoute = async (options) => {
+        return page.evaluate((navigateOptions) => {
+            return window.contextExternal.di
+                .get('router pageService')
+                .updateCurrentRoute(navigateOptions);
+        }, options);
+    };
+    return {
+        navigate,
+        navigateThenWaitForReload,
+        updateCurrentRoute,
+    };
+};
+
+// reference: https://github.com/vercel/next.js/blob/canary/packages/next/client/app-index.tsx#L162
+const waitHydrated = (page) => {
+    return Promise.race([
+        page.waitForFunction(() => {
+            return (window.contextExternal &&
+                window.contextExternal.di.get({ token: '__TRAMVAI_HYDRATED', optional: true }));
+        }, { polling: 100 }),
+        sleep(10000),
+    ]);
+};
+
+const checkSsrErrors = (text) => {
+    if (text.indexOf('Server: "%s" Client: "%s"%s') !== -1) {
+        throw new Error(`SSR breaking error: ${text}`);
+    }
+};
+const format = consoleWithStyle((stderr && stderr.level) || 0);
+const { nativeConsole } = global;
+const wrapPlaywrightPage = (page) => {
+    if (page.url() && page.url() !== 'about:blank') {
+        throw new Error(`You should wrap blank page before navigation, but page already has url "${page.url()}"`);
+    }
+    const originalGoto = page.goto;
+    // wait for page loading and hydration, because selective hydration ends later
+    // eslint-disable-next-line no-param-reassign
+    page.goto = async function goto(...args) {
+        const [response] = await Promise.all([
+            originalGoto.apply(page, args),
+            page.waitForNavigation({ waitUntil: 'domcontentloaded' }),
+        ]);
+        await waitHydrated(page);
+        return response;
+    };
+    page.on('requestfailed', (request) => nativeConsole.error('[PAGE REQUEST FAILED]', {
+        error: request.failure(),
+        url: request.url(),
+        headers: request.headers(),
+    }));
+    page.on('crash', (error) => {
+        nativeConsole.error(`[PAGE CRASHED]`, error);
+    });
+    page.on('pageerror', (error) => {
+        nativeConsole.error(`[PAGE ERROR]`, error.message);
+    });
+    page.on('console', async (consoleObj) => {
+        const args = consoleObj.args();
+        const text = consoleObj.text();
+        const messages = [];
+        checkSsrErrors(text);
+        for (let i = 0; i < args.length; i++) {
+            const arg = args[i];
+            const json = await arg.jsonValue().catch(() => null);
+            messages.push(json);
+        }
+        const logLevel = consoleObj.type() === 'error' ? 'error' : 'log';
+        const consoleArgs = messages.length ? messages : [text];
+        nativeConsole[logLevel](`[PAGE ${consoleObj.type().toUpperCase()}]`, format(...consoleArgs));
+    });
+    return {
+        page,
+        reset: (url = 'about:blank') => {
+            return page.goto(url);
+        },
+        waitForUrl: (url) => {
+            return page.waitForFunction((expectedUrl) => {
+                return window.location.href === expectedUrl;
+            }, url);
+        },
+        router: wrapRouter(page),
+        close: () => {
+            return page.close();
+        },
+    };
+};
+
+// проставляет данные в localStorage на домене, по факту не заходя ни на какую страницу
+// идея взята из https://github.com/puppeteer/puppeteer/issues/3692#issuecomment-453186180
+const enableBrowserLogger = async ({ browser, serverUrl, }) => {
+    const page = await browser.newPage();
+    page.route('**/*', (route) => {
+        route.fulfill({
+            status: 200,
+            contentType: 'text/plain',
+            body: 'tweak me.',
+        });
+    });
+    await page.goto(serverUrl, { timeout: 0 });
+    await page.evaluate(() => {
+        localStorage.setItem('_t_logger', '{"level":10,"enabledName":["command:*"],"enabledLevel":[50]}');
+    });
+    await page.close();
+};
+const initPlaywright = async (serverUrl, { enableLogging = true, ...options } = {}) => {
+    const browser = await chromium.launch({
+        ...PLAYWRIGHT_DEFAULT_LAUNCH_OPTIONS,
+        ...options,
+    });
+    if (enableLogging) {
+        await enableBrowserLogger({ browser, serverUrl });
+    }
+    return {
+        browser,
+        getPageWrapper: async (url) => {
+            const page = await browser.newPage();
+            await page.setDefaultNavigationTimeout(60000);
+            const wrapper = wrapPlaywrightPage(page);
+            if (url) {
+                await page.goto(url);
+            }
+            return wrapper;
+        },
+        close: () => {
+            return browser.close();
+        },
+    };
+};
+
+export { PLAYWRIGHT_DEFAULT_LAUNCH_OPTIONS, initPlaywright, waitHydrated, wrapPlaywrightPage };

package/lib/index.js

@@ -0,0 +1,179 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var playwrightCore = require('playwright-core');
+var supportsColor = require('supports-color');
+var consoleWithStyle = require('console-with-style');
+var testIntegration = require('@tramvai/test-integration');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var consoleWithStyle__default = /*#__PURE__*/_interopDefaultLegacy(consoleWithStyle);
+
+const PLAYWRIGHT_DEFAULT_LAUNCH_OPTIONS = {
+    args: [
+        '--no-sandbox',
+        '--disable-setuid-sandbox',
+        '--disable-dev-shm-usage',
+        process.env.HTTPS_PROXY ? `--proxy-server=${process.env.HTTPS_PROXY}` : '',
+    ].filter(Boolean),
+    headless: process.env.HEADLESS !== 'false',
+    timeout: 60 * 3 * 1000,
+};
+
+const wrapRouter = (page) => {
+    const navigate = async (options) => {
+        return page.evaluate((navigateOptions) => {
+            return window.contextExternal.di.get('router pageService').navigate(navigateOptions);
+        }, options);
+    };
+    const navigateThenWaitForReload = async (options) => {
+        return Promise.all([
+            page.evaluate((navigateOptions) => {
+                window.contextExternal.di.get('router pageService').navigate(navigateOptions);
+            }, options),
+            page.waitForNavigation(),
+        ]);
+    };
+    const updateCurrentRoute = async (options) => {
+        return page.evaluate((navigateOptions) => {
+            return window.contextExternal.di
+                .get('router pageService')
+                .updateCurrentRoute(navigateOptions);
+        }, options);
+    };
+    return {
+        navigate,
+        navigateThenWaitForReload,
+        updateCurrentRoute,
+    };
+};
+
+// reference: https://github.com/vercel/next.js/blob/canary/packages/next/client/app-index.tsx#L162
+const waitHydrated = (page) => {
+    return Promise.race([
+        page.waitForFunction(() => {
+            return (window.contextExternal &&
+                window.contextExternal.di.get({ token: '__TRAMVAI_HYDRATED', optional: true }));
+        }, { polling: 100 }),
+        testIntegration.sleep(10000),
+    ]);
+};
+
+const checkSsrErrors = (text) => {
+    if (text.indexOf('Server: "%s" Client: "%s"%s') !== -1) {
+        throw new Error(`SSR breaking error: ${text}`);
+    }
+};
+const format = consoleWithStyle__default["default"]((supportsColor.stderr && supportsColor.stderr.level) || 0);
+const { nativeConsole } = global;
+const wrapPlaywrightPage = (page) => {
+    if (page.url() && page.url() !== 'about:blank') {
+        throw new Error(`You should wrap blank page before navigation, but page already has url "${page.url()}"`);
+    }
+    const originalGoto = page.goto;
+    // wait for page loading and hydration, because selective hydration ends later
+    // eslint-disable-next-line no-param-reassign
+    page.goto = async function goto(...args) {
+        const [response] = await Promise.all([
+            originalGoto.apply(page, args),
+            page.waitForNavigation({ waitUntil: 'domcontentloaded' }),
+        ]);
+        await waitHydrated(page);
+        return response;
+    };
+    page.on('requestfailed', (request) => nativeConsole.error('[PAGE REQUEST FAILED]', {
+        error: request.failure(),
+        url: request.url(),
+        headers: request.headers(),
+    }));
+    page.on('crash', (error) => {
+        nativeConsole.error(`[PAGE CRASHED]`, error);
+    });
+    page.on('pageerror', (error) => {
+        nativeConsole.error(`[PAGE ERROR]`, error.message);
+    });
+    page.on('console', async (consoleObj) => {
+        const args = consoleObj.args();
+        const text = consoleObj.text();
+        const messages = [];
+        checkSsrErrors(text);
+        for (let i = 0; i < args.length; i++) {
+            const arg = args[i];
+            const json = await arg.jsonValue().catch(() => null);
+            messages.push(json);
+        }
+        const logLevel = consoleObj.type() === 'error' ? 'error' : 'log';
+        const consoleArgs = messages.length ? messages : [text];
+        nativeConsole[logLevel](`[PAGE ${consoleObj.type().toUpperCase()}]`, format(...consoleArgs));
+    });
+    return {
+        page,
+        reset: (url = 'about:blank') => {
+            return page.goto(url);
+        },
+        waitForUrl: (url) => {
+            return page.waitForFunction((expectedUrl) => {
+                return window.location.href === expectedUrl;
+            }, url);
+        },
+        router: wrapRouter(page),
+        close: () => {
+            return page.close();
+        },
+    };
+};
+
+// проставляет данные в localStorage на домене, по факту не заходя ни на какую страницу
+// идея взята из https://github.com/puppeteer/puppeteer/issues/3692#issuecomment-453186180
+const enableBrowserLogger = async ({ browser, serverUrl, }) => {
+    const page = await browser.newPage();
+    page.route('**/*', (route) => {
+        route.fulfill({
+            status: 200,
+            contentType: 'text/plain',
+            body: 'tweak me.',
+        });
+    });
+    await page.goto(serverUrl, { timeout: 0 });
+    await page.evaluate(() => {
+        localStorage.setItem('_t_logger', '{"level":10,"enabledName":["command:*"],"enabledLevel":[50]}');
+    });
+    await page.close();
+};
+const initPlaywright = async (serverUrl, { enableLogging = true, ...options } = {}) => {
+    const browser = await playwrightCore.chromium.launch({
+        ...PLAYWRIGHT_DEFAULT_LAUNCH_OPTIONS,
+        ...options,
+    });
+    if (enableLogging) {
+        await enableBrowserLogger({ browser, serverUrl });
+    }
+    return {
+        browser,
+        getPageWrapper: async (url) => {
+            const page = await browser.newPage();
+            await page.setDefaultNavigationTimeout(60000);
+            const wrapper = wrapPlaywrightPage(page);
+            if (url) {
+                await page.goto(url);
+            }
+            return wrapper;
+        },
+        close: () => {
+            return browser.close();
+        },
+    };
+};
+
+exports.PLAYWRIGHT_DEFAULT_LAUNCH_OPTIONS = PLAYWRIGHT_DEFAULT_LAUNCH_OPTIONS;
+exports.initPlaywright = initPlaywright;
+exports.waitHydrated = waitHydrated;
+exports.wrapPlaywrightPage = wrapPlaywrightPage;
+Object.keys(playwrightCore).forEach(function (k) {
+    if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () { return playwrightCore[k]; }
+    });
+});

package/lib/launch.d.ts

@@ -0,0 +1,22 @@
+import type { Browser } from 'playwright-core';
+import { chromium } from 'playwright-core';
+type PWOptions = Parameters<typeof chromium.launch>[0];
+type Options = PWOptions & {
+    enableLogging?: boolean;
+};
+export declare const initPlaywright: (serverUrl: string, { enableLogging, ...options }?: Options) => Promise<{
+    browser: Browser;
+    getPageWrapper: (url?: string) => Promise<{
+        page: import("playwright-core").Page;
+        reset: (url?: string) => Promise<import("playwright-core").Response | null>;
+        waitForUrl: (url: string) => Promise<import("playwright-core").JSHandle<false> | import("playwright-core").JSHandle<true>>;
+        router: {
+            navigate: (options: string | import("@tinkoff/router").NavigateOptions) => Promise<any>;
+            navigateThenWaitForReload: (options: string | import("@tinkoff/router").NavigateOptions) => Promise<[void, import("playwright-core").Response | null]>;
+            updateCurrentRoute: (options: import("@tinkoff/router").BaseNavigateOptions) => Promise<any>;
+        };
+        close: () => Promise<void>;
+    }>;
+    close: () => Promise<void>;
+}>;
+export {};

package/lib/router.d.ts

@@ -0,0 +1,11 @@
+import type { Page } from 'playwright-core';
+import type { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
+type PageService = typeof PAGE_SERVICE_TOKEN;
+type NavigateOptions = Parameters<PageService['navigate']>[0];
+type UpdateCurrentRouteOptions = Parameters<PageService['updateCurrentRoute']>[0];
+export declare const wrapRouter: (page: Page) => {
+    navigate: (options: NavigateOptions) => Promise<any>;
+    navigateThenWaitForReload: (options: NavigateOptions) => Promise<[void, import("playwright-core").Response | null]>;
+    updateCurrentRoute: (options: UpdateCurrentRouteOptions) => Promise<any>;
+};
+export {};

package/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import type { Page } from 'playwright-core';
+export declare const waitHydrated: (page: Page) => Promise<unknown>;

package/lib/wrapper.d.ts

@@ -0,0 +1,15 @@
+import type { Page } from 'playwright-core';
+declare global {
+    var nativeConsole: typeof console;
+}
+export declare const wrapPlaywrightPage: (page: Page) => {
+    page: Page;
+    reset: (url?: string) => Promise<import("playwright-core").Response | null>;
+    waitForUrl: (url: string) => Promise<import("playwright-core").JSHandle<false> | import("playwright-core").JSHandle<true>>;
+    router: {
+        navigate: (options: string | import("@tinkoff/router").NavigateOptions) => Promise<any>;
+        navigateThenWaitForReload: (options: string | import("@tinkoff/router").NavigateOptions) => Promise<[void, import("playwright-core").Response | null]>;
+        updateCurrentRoute: (options: import("@tinkoff/router").BaseNavigateOptions) => Promise<any>;
+    };
+    close: () => Promise<void>;
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@tramvai/test-pw",
+  "version": "2.59.0",
+  "description": "",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Tinkoff/tramvai.git"
+  },
+  "scripts": {
+    "build": "tramvai-build --for-publish",
+    "watch": "tsc -w",
+    "build-for-publish": "true"
+  },
+  "dependencies": {
+    "@tinkoff/utils": "^2.1.2",
+    "@tramvai/test-integration": "2.59.0",
+    "@tramvai/tokens-router": "2.59.0",
+    "console-with-style": "^1.1.0",
+    "supports-color": "8.1.1",
+    "tslib": "^2.4.0",
+    "playwright-core": "1.29.0"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@types/supports-color": "^8.1.1",
+    "playwright-core": "1.29.0"
+  },
+  "license": "Apache-2.0",
+  "module": "lib/index.es.js"
+}