Playwright test for ReefKnot

.github/workflows/test.yml

@@ -0,0 +1,69 @@
+name: Test ReefKnot
+
+on:
+  workflow_dispatch:
+    inputs:
+      STAND_ENV:
+        description: 'Stand env'
+        required: true
+        type: choice
+        default: testnet
+        options:
+          - mainnet
+          - testnet
+      WALLETS:
+        description: 'Select wallet to run tests'
+        required: true
+        type: choice
+        default: All
+        options:
+          - All
+          - metamask
+          - okx
+
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    environment: test
+    env:
+      TEST_BRANCH: ${{ github.event.inputs.branch }}
+      RPC_URL_KEY: ${{ secrets.RPC_URL_KEY }}
+      QASE_API_TOKEN: ${{ secrets.QASE_API_TOKEN }}
+      WALLET_SECRET_PHRASE: ${{ secrets.WALLET_SECRET_PHRASE }}
+      WALLET_PASSWORD: ${{ secrets.WALLET_PASSWORD }}
+      STAND_ENV: ${{ github.event.inputs.STAND_ENV || 'testnet' }}
+      WALLETS: ${{ github.event.inputs.WALLETS || 'All' }}
+      STAND_TYPE: stand
+      NODE_OPTIONS: --max-old-space-size=4096
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: yarn install --immutable
+        working-directory: playwright-tests
+
+      - name: Install Playwright Browsers
+        run: yarn playwright install chromium --with-deps
+        working-directory: playwright-tests
+
+      - name: Run tests
+        working-directory: playwright-tests
+        run: |
+          echo "Running All tests"
+          xvfb-run --auto-servernum -- yarn test:reef-knot
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-tests/playwright-report/
+          retention-days: 30

apps/demo-react/components/action-item/action-item.tsx

@@ -12,7 +12,7 @@ export const ActionItem: FC<PropsWithChildren<ActionItemProps>> = (props) => {
 
   return (
     <WrapperStyle>
-      <ActionStyle title={title} walletAction action={action}>
+      <ActionStyle title={title} walletAction action={action} data-testid={title+'Block'}>
         {children}
       </ActionStyle>
     </WrapperStyle>

apps/demo-react/components/layout/header/walletButton/walletButton.tsx

@@ -22,6 +22,7 @@ const WalletButton: FC<ButtonProps> = (props) => {
       variant="text"
       color="secondary"
       onClick={openModal}
+      data-testid="walletBtn"
       {...rest}
     >
       <WalletButtonWrapperStyle>

apps/demo-react/components/stats-item/stats-item.tsx

@@ -23,7 +23,7 @@ export const StatsItem: FC<StatsItemProps> = ({ value, token, loading }) => {
 
   return (
     <StatsWrapperStyle>
-      <ContentWrapperStyle>
+      <ContentWrapperStyle data-testid={token}>
         <StatsValueStyle>
           {loading ? <InlineLoaderStyle /> : shortValue}
         </StatsValueStyle>

apps/demo-react/components/walletModal/walletModal.tsx

@@ -53,7 +53,7 @@ const WalletModal: FC<ModalProps> = (props) => {
   };
   return (
     <Modal title="Account" {...props}>
-      <WalletModalContentStyle>
+      <WalletModalContentStyle data-testid='walletModal'>
         <WalletModalConnectedStyle>
           {connectorName && (
             <WalletModalConnectorStyle>
@@ -66,6 +66,7 @@ const WalletModal: FC<ModalProps> = (props) => {
               size="xs"
               variant="outlined"
               onClick={handleDisconnect}
+              data-testid='disconnectBtn'
             >
               Disconnect
             </WalletModalDisconnectStyle>

apps/demo-react/features/stats/stats.tsx

@@ -42,7 +42,7 @@ const StatsComponent = () => {
     : formatEther(wstethBalance.data || BigInt(0));
 
   return (
-    <StatsWrapperStyle>
+    <StatsWrapperStyle data-testid="statsBlock">
       <LeftColumnStyle>
         <TokenInputWrapperStyle>
           <ThemeProvider theme={themeLight}>
@@ -51,6 +51,7 @@ const StatsComponent = () => {
               fullwidth
               onChange={setInputValue}
               value={inputValue}
+              data-testid="amountInput"
             />
           </ThemeProvider>
         </TokenInputWrapperStyle>
@@ -59,11 +60,11 @@ const StatsComponent = () => {
         <InfoWrapperStyle>
           <div>
             <WalletInfoTitleStyle>Provider:</WalletInfoTitleStyle>
-            <WalletInfoValueStyle>{connectorName}</WalletInfoValueStyle>
+            <WalletInfoValueStyle data-testid="providerName">{connectorName}</WalletInfoValueStyle>
           </div>
           <div>
             <WalletInfoTitleStyle>Network:</WalletInfoTitleStyle>
-            <WalletInfoValueStyle>{web3Info.chainId}</WalletInfoValueStyle>
+            <WalletInfoValueStyle data-testid="chainId">{web3Info.chainId}</WalletInfoValueStyle>
           </div>
         </InfoWrapperStyle>
         <BalancesWrapperStyle>

playwright-tests/.env.example

@@ -0,0 +1,18 @@
+### Playwright test run .env configuration
+
+# Stand env for the wallet setup. Can be equal: testnet, mainnet
+STAND_ENV=testnet
+
+# Link type for a test run. Can be equal: stand, localhost
+STAND_TYPE=localhost
+
+# Wallet configurations
+## Secret phase of the wallet to set up the wallet extension
+WALLET_SECRET_PHRASE=
+## Wallet password (use minimal 10 symbols with uppercase, lowercase, numbers, and symbols)
+WALLET_PASSWORD=
+## Drpc private key
+RPC_URL_KEY=
+
+# Qase reporter
+QASE_API_TOKEN=

playwright-tests/.eslintignore

@@ -0,0 +1,9 @@
+node_modules
+dist
+playwright-report
+test-results
+
+/.jest
+
+/.yarn/*
+/.pnp.*

playwright-tests/.eslintrc.json

@@ -0,0 +1,46 @@
+{
+  "env": {
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["@typescript-eslint", "import"],
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": "off",
+    "prettier/prettier": ["error", {}, { "usePrettierrc": true }],
+    "no-irregular-whitespace": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unnecessary-type-constraint": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "ignoreRestSiblings": true }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["*.js"],
+      "rules": {
+        "@typescript-eslint/explicit-module-boundary-types": "off"
+      }
+    }
+  ],
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true,
+        "project": "./tsconfig.json"
+      }
+    }
+  }
+}

playwright-tests/.gitignore

@@ -0,0 +1,8 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# playwright
+test-results/
+playwright-report/
+.browser_context_*
+logs/
+.yalc

playwright-tests/README.md

@@ -0,0 +1,18 @@
+# <img src="logo.svg" alt='Reef Knot logo' height='45' align='top'/> Reef-Knot. Playwright test 
+
+## ❖ Installation
+1. Install dependencies from the `/playwright-tests` directory:
+```
+yarn && yarn playwright install chromium
+```
+1. Fill the `.env` file in the `/playwright-tests` folder using the `.env.example` file as a template.
+
+## ❖ How to run tests on a Deployed Stand
+1. Set up the `.env` variable: `STAND_TYPE=stand`
+2. Navigate to the `/playwright-tests` folder and run: `yarn test:reef-knot`
+
+## ❖ How to run tests on Localhost
+1. Start the `reef-knot` demo app on your local machine: `yarn run dev`
+2. Verify the localhost link in `/playwright-tests/config/env.config.ts`, see the `STAND_LINK.localhost` property (_default value is http://localhost:3000_)
+3. Set the `.env` variable: `STAND_TYPE=localhost`
+4. Navigate to the `/playwright-tests` directory and run: `yarn test:reef-knot`

playwright-tests/config/config.ts

@@ -0,0 +1,55 @@
+import {
+  STAND_CONFIGS,
+  STAND_LINK,
+  STAND_ENV,
+  WALLETS,
+  TestWalletConfig,
+} from './env.config';
+import * as dotenv from 'dotenv';
+import * as path from 'path';
+
+dotenv.config({ path: path.resolve(__dirname, '../.env') });
+
+export const REEF_KNOT_CONFIG = {
+  STAND_TYPE: process.env.STAND_TYPE,
+  STAND_CONFIG: getStandConfig(),
+  STAND_URL: getStandUrl(),
+  STAND_ENV: process.env.STAND_ENV,
+  WALLETS: getWalletsForTestRun(),
+};
+
+function getStandConfig() {
+  switch (process.env.STAND_ENV) {
+    case 'mainnet':
+      return STAND_CONFIGS.get(STAND_ENV.mainnet);
+    case 'testnet':
+      return STAND_CONFIGS.get(STAND_ENV.testnet);
+    default:
+      throw Error(
+        `CONFIG_VALIDATION_ERROR: STAND_ENV is not correctly defined (value is "${process.env.STAND_ENV}")`,
+      );
+  }
+}
+
+function getStandUrl() {
+  switch (process.env.STAND_TYPE) {
+    case 'stand':
+      return STAND_LINK.stand;
+    case 'localhost':
+      return STAND_LINK.localhost;
+    default:
+      throw Error(
+        `CONFIG_VALIDATION_ERROR: STAND_TYPE is not correctly defined (value is "${process.env.STAND_TYPE}")`,
+      );
+  }
+}
+
+function getWalletsForTestRun() {
+  const wallets: TestWalletConfig[] = [];
+  if (!process.env.WALLETS || process.env.WALLETS === 'All') {
+    WALLETS.forEach((wallet) => wallets.push(wallet));
+  } else {
+    wallets.push(WALLETS.get(process.env.WALLETS));
+  }
+  return wallets;
+}

playwright-tests/config/env.config.ts

@@ -0,0 +1,65 @@
+export interface StandConfig {
+  chainId: number;
+  tokenSymbol: string;
+  chainName: string;
+  rpcUrl: string;
+  scan: string;
+  contracts: {
+    stake: string;
+    wrap: string;
+    withdraw: string;
+  };
+}
+
+export const STAND_ENV = {
+  testnet: 'testnet',
+  mainnet: 'mainnet',
+};
+
+export const STAND_LINK = {
+  stand: 'https://lidofinance.github.io/reef-knot/',
+  localhost: 'http://localhost:3000/',
+};
+
+export const STAND_CONFIGS = new Map<string, StandConfig>([
+  [
+    STAND_ENV.testnet,
+    {
+      chainId: 17000,
+      tokenSymbol: 'ETH',
+      chainName: 'Holesky',
+      scan: 'https://holesky.etherscan.io/',
+      contracts: {
+        stake: '0x3F1c547b21f65e10480dE3ad8E19fAAC46C95034',
+        wrap: '0x8d09a4502Cc8Cf1547aD300E066060D043f6982D',
+        withdraw: '0xc7cc160b58F8Bb0baC94b80847E2CF2800565C50',
+      },
+      rpcUrl: `https://lb.drpc.org/ogrpc?network=holesky&dkey=${process.env.RPC_URL_KEY}`,
+    },
+  ],
+  [
+    STAND_ENV.mainnet,
+    {
+      chainId: 1,
+      tokenSymbol: 'ETH',
+      chainName: 'Ethereum Mainnet',
+      scan: 'https://etherscan.io/',
+      contracts: {
+        stake: '0xae7ab96520DE3A18E5e111B5EaAb095312D7fE84',
+        wrap: '0x7f39C581F595B53c5cb19bD0b3f8dA6c935E2Ca0',
+        withdraw: '0x889edC2eDab5f40e902b864aD4d7AdE8E412F9B1',
+      },
+      rpcUrl: `https://lb.drpc.org/ogrpc?network=ethereum&dkey=${process.env.RPC_URL_KEY}`,
+    },
+  ],
+]);
+
+export interface TestWalletConfig {
+  name: string;
+  connectWalletEvent: string;
+}
+
+export const WALLETS = new Map<string, TestWalletConfig>([
+  ['metamask', { name: 'metamask', connectWalletEvent: 'metaMask connected' }],
+  ['okx', { name: 'okx', connectWalletEvent: 'okx connected' }],
+]);

playwright-tests/config/index.ts

@@ -0,0 +1,3 @@
+export * from './config';
+export * from './env.config';
+export * from './reporter.config';