@rich-automation/lotto 0.1.4 → 0.1.5

package/lib/cjs/controllers/factory.js

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createBrowserController = void 0;
 const puppeteer_1 = require("./puppeteer");
+const playwright_1 = require("./playwright");
 function createBrowserController(name, configs, logger) {
     switch (name) {
         case 'puppeteer':
             return new puppeteer_1.PuppeteerController(configs, logger);
+        case 'playwright':
+            return new playwright_1.PlaywrightController(configs, logger);
     }
 }
 exports.createBrowserController = createBrowserController;

package/lib/cjs/controllers/playwright/index.js

@@ -0,0 +1,74 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaywrightController = void 0;
+const playwright_1 = require("playwright");
+const deferred_1 = require("../../utils/deferred");
+const playwright_page_1 = require("./playwright.page");
+const constants_1 = require("../../constants");
+class PlaywrightController {
+    constructor(configs, logger) {
+        this.getBrowser = () => __awaiter(this, void 0, void 0, function* () {
+            const p = (0, deferred_1.deferred)();
+            if (this.browser) {
+                p.resolve(this.browser);
+            }
+            else {
+                let retry = 0;
+                const interval = setInterval(() => {
+                    if (constants_1.CONST.BROWSER_INIT_RETRY_COUNT < retry) {
+                        clearInterval(interval);
+                        p.reject(new Error('Browser is not initialized'));
+                    }
+                    else if (this.browser) {
+                        clearInterval(interval);
+                        p.resolve(this.browser);
+                    }
+                    retry++;
+                }, constants_1.CONST.BROWSER_INIT_RETRY_TIMEOUT);
+            }
+            return p.promise;
+        });
+        this.focus = (pageIndex = -1) => __awaiter(this, void 0, void 0, function* () {
+            const browser = yield this.getBrowser();
+            const pages = browser.pages();
+            if (pages.length === 0) {
+                const page = yield browser.newPage();
+                return new playwright_page_1.PlaywrightPage(browser, page, this.logger);
+            }
+            else {
+                const isWithinRange = Math.max(0, Math.min(pageIndex, pages.length - 1)) === pageIndex;
+                const page = pages.at(isWithinRange ? pageIndex : -1);
+                if (!page)
+                    throw new Error('Page is not found');
+                return new playwright_page_1.PlaywrightPage(browser, page, this.logger);
+            }
+        });
+        this.close = () => __awaiter(this, void 0, void 0, function* () {
+            const browser = yield this.getBrowser();
+            return browser.close();
+        });
+        this.cleanPages = (remainingPageIndex) => __awaiter(this, void 0, void 0, function* () {
+            const browser = yield this.getBrowser();
+            const pages = browser.pages();
+            const promises = pages.map((page, index) => __awaiter(this, void 0, void 0, function* () {
+                if (!remainingPageIndex.includes(index)) {
+                    return page.close();
+                }
+            }));
+            yield Promise.all(promises);
+        });
+        this.configs = configs;
+        this.logger = logger;
+        playwright_1.chromium.launch(this.configs).then((browser) => __awaiter(this, void 0, void 0, function* () { return (this.browser = yield browser.newContext()); }));
+    }
+}
+exports.PlaywrightController = PlaywrightController;

package/lib/cjs/controllers/playwright/playwright.page.js

@@ -0,0 +1,91 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaywrightPage = void 0;
+const deferred_1 = require("../../utils/deferred");
+const lazyRun_1 = require("../../utils/lazyRun");
+class PlaywrightPage {
+    constructor(context, page, logger) {
+        this.context = context;
+        this.page = page;
+        this.logger = logger;
+    }
+    url() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.page.url();
+        });
+    }
+    goto(url) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.page.goto(url, { waitUntil: 'load' });
+        });
+    }
+    fill(selector, value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.page.type(selector, value.toString());
+        });
+    }
+    click(selector, domDirect = false) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (domDirect) {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                yield this.page.evaluate(s => document.querySelector(s).click(), selector);
+                yield this.wait(250);
+            }
+            else {
+                yield this.page.click(selector, { timeout: 0 });
+            }
+        });
+    }
+    select(selector, value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.page.selectOption(selector, value);
+        });
+    }
+    querySelectorAll(selector, callback) {
+        return this.page.$$eval(selector, callback);
+    }
+    getCookies() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const cookies = yield this.context.cookies();
+            return JSON.stringify(cookies);
+        });
+    }
+    setCookies(cookies) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const cookieParams = JSON.parse(cookies);
+            yield this.context.addCookies(cookieParams);
+        });
+    }
+    wait(param) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const p = (0, deferred_1.deferred)();
+            if (param === 'idle') {
+                yield this.page.waitForNavigation({ waitUntil: 'networkidle' });
+                p.resolve();
+            }
+            if (param === 'load') {
+                yield this.page.waitForNavigation({ waitUntil: 'load' });
+                p.resolve();
+            }
+            if (typeof param === 'number') {
+                yield (0, lazyRun_1.lazyRun)(() => __awaiter(this, void 0, void 0, function* () { return p.resolve(); }), param);
+            }
+            return p.promise;
+        });
+    }
+    on(event, callback) {
+        this.page.on(event, callback);
+        return () => this.page.off(event, callback);
+    }
+}
+exports.PlaywrightPage = PlaywrightPage;

package/lib/cjs/controllers/puppeteer/index.js

@@ -71,7 +71,11 @@ class PuppeteerController {
         });
         this.configs = configs;
         this.logger = logger;
-        puppeteer_1.default.launch(this.configs).then(browser => (this.browser = browser));
+        puppeteer_1.default
+            .launch(Object.assign(Object.assign({}, this.configs), { headless: this.configs.headless === true ? 'new' : this.configs.headless }))
+            .then((browser) => __awaiter(this, void 0, void 0, function* () {
+            this.browser = browser;
+        }));
     }
 }
 exports.PuppeteerController = PuppeteerController;

package/lib/cjs/controllers/puppeteer/puppeteer.page.js

@@ -35,6 +35,7 @@ class PuppeteerPage {
     click(selector, domDirect = false) {
         return __awaiter(this, void 0, void 0, function* () {
             if (domDirect) {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 yield this.page.evaluate(s => document.querySelector(s).click(), selector);
                 yield this.wait(250);

package/lib/cjs/lottoService.js

@@ -29,6 +29,7 @@ const validatePurchaseAvailability_1 = require("./utils/validatePurchaseAvailabi
 const getCheckWinningLink_1 = require("./utils/getCheckWinningLink");
 class LottoService {
     constructor(configs) {
+        var _a;
         this.context = {
             authenticated: false
         };
@@ -115,9 +116,9 @@ class LottoService {
             yield page.click(selectors_1.SELECTORS.PURCHASE_AMOUNT_CONFIRM_BTN);
             // click purchase button
             this.logger.debug('[purchase]', 'click purchase button');
-            yield page.click(selectors_1.SELECTORS.PURCHASE_BTN, true);
+            yield page.click(selectors_1.SELECTORS.PURCHASE_BTN);
             this.logger.debug('[purchase]', 'click purchase confirm button');
-            yield page.click(selectors_1.SELECTORS.PURCHASE_CONFIRM_BTN, true);
+            yield page.click(selectors_1.SELECTORS.PURCHASE_CONFIRM_BTN);
             yield page.wait(1000);
             // game result
             this.logger.debug('[purchase]', 'print result');
@@ -136,7 +137,7 @@ class LottoService {
             return (0, getCheckWinningLink_1.getCheckWinningLink)(round, numbers);
         };
         this.logger = new logger_1.default(configs === null || configs === void 0 ? void 0 : configs.logLevel, '[LottoService]');
-        this.browserController = (0, factory_1.createBrowserController)('puppeteer', Object.assign(Object.assign({ defaultViewport: { width: 1080, height: 1024 } }, configs), { headless: (configs === null || configs === void 0 ? void 0 : configs.headless) === false ? false : 'new' }), this.logger);
+        this.browserController = (0, factory_1.createBrowserController)((_a = configs === null || configs === void 0 ? void 0 : configs.controller) !== null && _a !== void 0 ? _a : 'playwright', Object.assign({ defaultViewport: { width: 1080, height: 1024 } }, configs), this.logger);
     }
 }
 exports.LottoService = LottoService;

package/lib/esm/controllers/factory.js

@@ -1,7 +1,10 @@
 import { PuppeteerController } from './puppeteer';
+import { PlaywrightController } from './playwright';
 export function createBrowserController(name, configs, logger) {
     switch (name) {
         case 'puppeteer':
             return new PuppeteerController(configs, logger);
+        case 'playwright':
+            return new PlaywrightController(configs, logger);
     }
 }

package/lib/esm/controllers/playwright/index.js

@@ -0,0 +1,71 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { chromium } from 'playwright';
+import { deferred } from '../../utils/deferred';
+import { PlaywrightPage } from './playwright.page';
+import { CONST } from '../../constants';
+import {} from '../../logger';
+export class PlaywrightController {
+    constructor(configs, logger) {
+        this.getBrowser = () => __awaiter(this, void 0, void 0, function* () {
+            const p = deferred();
+            if (this.browser) {
+                p.resolve(this.browser);
+            }
+            else {
+                let retry = 0;
+                const interval = setInterval(() => {
+                    if (CONST.BROWSER_INIT_RETRY_COUNT < retry) {
+                        clearInterval(interval);
+                        p.reject(new Error('Browser is not initialized'));
+                    }
+                    else if (this.browser) {
+                        clearInterval(interval);
+                        p.resolve(this.browser);
+                    }
+                    retry++;
+                }, CONST.BROWSER_INIT_RETRY_TIMEOUT);
+            }
+            return p.promise;
+        });
+        this.focus = (pageIndex = -1) => __awaiter(this, void 0, void 0, function* () {
+            const browser = yield this.getBrowser();
+            const pages = browser.pages();
+            if (pages.length === 0) {
+                const page = yield browser.newPage();
+                return new PlaywrightPage(browser, page, this.logger);
+            }
+            else {
+                const isWithinRange = Math.max(0, Math.min(pageIndex, pages.length - 1)) === pageIndex;
+                const page = pages.at(isWithinRange ? pageIndex : -1);
+                if (!page)
+                    throw new Error('Page is not found');
+                return new PlaywrightPage(browser, page, this.logger);
+            }
+        });
+        this.close = () => __awaiter(this, void 0, void 0, function* () {
+            const browser = yield this.getBrowser();
+            return browser.close();
+        });
+        this.cleanPages = (remainingPageIndex) => __awaiter(this, void 0, void 0, function* () {
+            const browser = yield this.getBrowser();
+            const pages = browser.pages();
+            const promises = pages.map((page, index) => __awaiter(this, void 0, void 0, function* () {
+                if (!remainingPageIndex.includes(index)) {
+                    return page.close();
+                }
+            }));
+            yield Promise.all(promises);
+        });
+        this.configs = configs;
+        this.logger = logger;
+        chromium.launch(this.configs).then((browser) => __awaiter(this, void 0, void 0, function* () { return (this.browser = yield browser.newContext()); }));
+    }
+}

package/lib/esm/controllers/playwright/playwright.page.js

@@ -0,0 +1,87 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { deferred } from '../../utils/deferred';
+import { lazyRun } from '../../utils/lazyRun';
+export class PlaywrightPage {
+    constructor(context, page, logger) {
+        this.context = context;
+        this.page = page;
+        this.logger = logger;
+    }
+    url() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.page.url();
+        });
+    }
+    goto(url) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.page.goto(url, { waitUntil: 'load' });
+        });
+    }
+    fill(selector, value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.page.type(selector, value.toString());
+        });
+    }
+    click(selector, domDirect = false) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (domDirect) {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                yield this.page.evaluate(s => document.querySelector(s).click(), selector);
+                yield this.wait(250);
+            }
+            else {
+                yield this.page.click(selector, { timeout: 0 });
+            }
+        });
+    }
+    select(selector, value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.page.selectOption(selector, value);
+        });
+    }
+    querySelectorAll(selector, callback) {
+        return this.page.$$eval(selector, callback);
+    }
+    getCookies() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const cookies = yield this.context.cookies();
+            return JSON.stringify(cookies);
+        });
+    }
+    setCookies(cookies) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const cookieParams = JSON.parse(cookies);
+            yield this.context.addCookies(cookieParams);
+        });
+    }
+    wait(param) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const p = deferred();
+            if (param === 'idle') {
+                yield this.page.waitForNavigation({ waitUntil: 'networkidle' });
+                p.resolve();
+            }
+            if (param === 'load') {
+                yield this.page.waitForNavigation({ waitUntil: 'load' });
+                p.resolve();
+            }
+            if (typeof param === 'number') {
+                yield lazyRun(() => __awaiter(this, void 0, void 0, function* () { return p.resolve(); }), param);
+            }
+            return p.promise;
+        });
+    }
+    on(event, callback) {
+        this.page.on(event, callback);
+        return () => this.page.off(event, callback);
+    }
+}

package/lib/esm/controllers/puppeteer/index.js

@@ -66,6 +66,10 @@ export class PuppeteerController {
         });
         this.configs = configs;
         this.logger = logger;
-        puppeteer.launch(this.configs).then(browser => (this.browser = browser));
+        puppeteer
+            .launch(Object.assign(Object.assign({}, this.configs), { headless: this.configs.headless === true ? 'new' : this.configs.headless }))
+            .then((browser) => __awaiter(this, void 0, void 0, function* () {
+            this.browser = browser;
+        }));
     }
 }

package/lib/esm/controllers/puppeteer/puppeteer.page.js

@@ -33,6 +33,7 @@ export class PuppeteerPage {
     click(selector, domDirect = false) {
         return __awaiter(this, void 0, void 0, function* () {
             if (domDirect) {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 yield this.page.evaluate(s => document.querySelector(s).click(), selector);
                 yield this.wait(250);

package/lib/esm/lottoService.js

@@ -23,6 +23,7 @@ import { validatePurchaseAvailability } from './utils/validatePurchaseAvailabili
 import { getCheckWinningLink } from './utils/getCheckWinningLink';
 export class LottoService {
     constructor(configs) {
+        var _a;
         this.context = {
             authenticated: false
         };
@@ -109,9 +110,9 @@ export class LottoService {
             yield page.click(SELECTORS.PURCHASE_AMOUNT_CONFIRM_BTN);
             // click purchase button
             this.logger.debug('[purchase]', 'click purchase button');
-            yield page.click(SELECTORS.PURCHASE_BTN, true);
+            yield page.click(SELECTORS.PURCHASE_BTN);
             this.logger.debug('[purchase]', 'click purchase confirm button');
-            yield page.click(SELECTORS.PURCHASE_CONFIRM_BTN, true);
+            yield page.click(SELECTORS.PURCHASE_CONFIRM_BTN);
             yield page.wait(1000);
             // game result
             this.logger.debug('[purchase]', 'print result');
@@ -130,6 +131,6 @@ export class LottoService {
             return getCheckWinningLink(round, numbers);
         };
         this.logger = new Logger(configs === null || configs === void 0 ? void 0 : configs.logLevel, '[LottoService]');
-        this.browserController = createBrowserController('puppeteer', Object.assign(Object.assign({ defaultViewport: { width: 1080, height: 1024 } }, configs), { headless: (configs === null || configs === void 0 ? void 0 : configs.headless) === false ? false : 'new' }), this.logger);
+        this.browserController = createBrowserController((_a = configs === null || configs === void 0 ? void 0 : configs.controller) !== null && _a !== void 0 ? _a : 'playwright', Object.assign({ defaultViewport: { width: 1080, height: 1024 } }, configs), this.logger);
     }
 }

package/lib/typescript/controllers/factory.d.ts

@@ -1,3 +1,3 @@
 import type { BrowserConfigs, BrowserControllerInterface } from '../types';
 import type { LoggerInterface } from '../logger';
-export declare function createBrowserController(name: 'puppeteer', configs: BrowserConfigs, logger: LoggerInterface): BrowserControllerInterface;
+export declare function createBrowserController(name: 'puppeteer' | 'playwright', configs: BrowserConfigs, logger: LoggerInterface): BrowserControllerInterface;

package/lib/typescript/controllers/playwright/index.d.ts

@@ -0,0 +1,14 @@
+import type { BrowserConfigs, BrowserControllerInterface } from '../../types';
+import type { BrowserContext } from 'playwright';
+import { PlaywrightPage } from './playwright.page';
+import { type LoggerInterface } from '../../logger';
+export declare class PlaywrightController implements BrowserControllerInterface {
+    configs: BrowserConfigs;
+    logger: LoggerInterface;
+    browser: BrowserContext;
+    constructor(configs: BrowserConfigs, logger: LoggerInterface);
+    private getBrowser;
+    focus: (pageIndex?: number) => Promise<PlaywrightPage>;
+    close: () => Promise<void>;
+    cleanPages: (remainingPageIndex: number[]) => Promise<void>;
+}

package/lib/typescript/controllers/playwright/playwright.page.d.ts

@@ -0,0 +1,20 @@
+import type { BrowserPageEvents, BrowserPageInterface, FakeDOMElement, StringifiedCookies } from '../../types';
+import type { Page } from 'playwright-core';
+import type { LoggerInterface } from '../../logger';
+import type { BrowserContext } from 'playwright';
+export declare class PlaywrightPage implements BrowserPageInterface {
+    context: BrowserContext;
+    page: Page;
+    logger?: LoggerInterface;
+    constructor(context: BrowserContext, page: Page, logger?: LoggerInterface);
+    url(): Promise<string>;
+    goto(url: string): Promise<void>;
+    fill(selector: string, value: string | number): Promise<void>;
+    click(selector: string, domDirect?: boolean): Promise<void>;
+    select(selector: string, value: string): Promise<void>;
+    querySelectorAll<T>(selector: string, callback: (elems: FakeDOMElement[]) => T): Promise<T>;
+    getCookies(): Promise<string>;
+    setCookies(cookies: StringifiedCookies): Promise<void>;
+    wait(param: 'idle' | 'load' | number): Promise<void>;
+    on(event: BrowserPageEvents, callback: (...args: unknown[]) => void): () => Page;
+}

package/lib/typescript/types.d.ts

@@ -11,8 +11,9 @@ export interface LottoServiceInterface {
     getCheckWinningLink(round: number, numbers: number[][]): string;
 }
 export interface BrowserConfigs {
+    controller?: 'puppeteer' | 'playwright';
     logLevel?: LogLevel;
-    headless?: boolean | 'new';
+    headless?: boolean;
     defaultViewport?: {
         width: number;
         height: number;
@@ -45,7 +46,7 @@ export type FakeDOMElement = {
     innerHTML: string;
     children: FakeDOMElement[];
 };
-export type BrowserPageEvents = 'load' | 'close' | 'dialog' | 'response';
+export type BrowserPageEvents = 'response';
 export type Unsubscribe = () => void;
 export type StringifiedCookies = string;
 export type GetWinningNumbersResponse = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rich-automation/lotto",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Lotto module",
   "publishConfig": {
     "access": "public",
@@ -22,6 +22,7 @@
   "files": [
     "lib",
     "package.json",
+    "playwright.config.ts",
     "README.md"
   ],
   "packageManager": "yarn@1.22.19",
@@ -35,7 +36,8 @@
     "build:esm": "tsc --project tsconfig.esm.json && echo '{\"type\": \"module\"}' > lib/esm/package.json",
     "build:dts": "tsc --project tsconfig.json --emitDeclarationOnly --declaration --declarationDir lib/typescript",
     "test": "jest --forceExit --detectOpenHandles",
-    "install:chrome": "node ./node_modules/puppeteer/install.js",
+    "install:puppeteer": "node ./node_modules/puppeteer/install.js",
+    "install:playwright": "npx playwright install --with-deps",
     "fix": "yarn fix:eslint && yarn fix:prettier",
     "fix:eslint": "eslint --fix src --ext js,jsx,ts,tsx ",
     "fix:prettier": "prettier --write \"src/**/*.{ts,tsx,js}\"",
@@ -47,12 +49,14 @@
   "dependencies": {
     "axios": "^1.3.5",
     "dayjs": "^1.11.7",
+    "playwright": "^1.35.0",
     "puppeteer": "^20.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.4",
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-typescript": "^7.21.4",
+    "@playwright/test": "^1.35.0",
     "@types/jest": "^29.5.0",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",

package/playwright.config.ts

@@ -0,0 +1,66 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './src/__tests__',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    },
+    // {
+    //   name: 'chromium',
+    //   use: { ...devices['Desktop Chrome'] },
+    // },
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});