From c66c6920ba3846ec1f433b7eab5b1dfe55014a4a Mon Sep 17 00:00:00 2001
From: Stepan Lavrentev <40560660+stepanLav@users.noreply.github.com>
Date: Tue, 19 Nov 2024 11:56:26 +0300
Subject: [PATCH] Update test implementation (#2668)

* fix: add testId to components

* fix: import problem

* fix: link test

* fix: regress tests

* fix: fee test

fix: remove redundant locator

fix: update fee test implementation

* fix: import resolution

fix: import resolution

fix: import resolution

fix: remove redundant ids

fix: return some buttons

* fix: rename testId

* fix: move constants out of ui-kit

* fix: rename main to common

* fix: change name for testid
---
 .../ui/FeeWithLabel/FeeWithLabel.tsx          |  2 +
 .../wallet/ui/AccountsList/AccountsList.tsx   |  3 +-
 .../AssetsSettings/ui/AssetsSettings.tsx      |  2 +
 .../Transfer/ui/Confirmation.tsx              |  2 +
 .../wallets/WalletSelect/ui/WalletButton.tsx  |  2 +
 .../pages/Onboarding/WatchOnly/WatchOnly.tsx  |  7 +-
 .../pages/Onboarding/Welcome/Welcome.tsx      |  6 ++
 .../pages/Onboarding/Welcome/WelcomeCard.tsx  |  4 +-
 src/renderer/shared/constants/index.ts        |  1 +
 src/renderer/shared/constants/testIds.ts      | 24 ++++++
 .../AccountExplorer/AccountExplorers.tsx      |  5 +-
 .../ui/Buttons/IconButton/IconButton.tsx      |  3 +
 .../shared/ui/DetailRow/DetailRow.tsx         |  8 +-
 src/renderer/shared/ui/Inputs/Input/Input.tsx |  3 +
 .../ui/Popovers/MenuPopover/MenuPopover.tsx   |  8 +-
 tests/system/data/chains/chainsList.ts        | 11 ++-
 tests/system/pages/BaseModalWindow.ts         | 24 ++----
 tests/system/pages/BasePage.ts                | 28 +------
 .../pages/_elements/AssetsPageElements.ts     |  5 +-
 .../pages/_elements/LoginPageElements.ts      | 14 ++--
 .../pages/_elements/TransferModalElements.ts  |  7 +-
 .../pages/assetsPage/VaultAssetsPage.ts       |  5 +-
 .../pages/assetsPage/WatchOnlyAssetsPage.ts   |  2 +-
 tests/system/pages/loginPage/BaseLoginPage.ts | 10 +--
 .../pages/loginPage/WatchOnlyLoginPage.ts     | 21 +++--
 .../pages/modals/TransferModalWindow.ts       |  5 +-
 .../system/pages/modals/WalletModalWindow.ts  |  4 +-
 .../system/tests/assets/load.eth.fee.test.ts  | 28 +------
 tests/system/tests/assets/load.fee.test.ts    | 28 +------
 .../vault.onboarding.system.test.ts           | 79 ++++++-------------
 .../watch.only.onboarding.system.test.ts      | 32 ++------
 tests/system/utils/baseRegularFixture.ts      | 39 +++++++++
 tests/system/utils/feeFixture.ts              | 19 +++++
 tests/system/utils/interactWithDatabase.ts    | 30 +++----
 tsconfig.json                                 |  2 +-
 35 files changed, 230 insertions(+), 243 deletions(-)
 create mode 100644 src/renderer/shared/constants/index.ts
 create mode 100644 src/renderer/shared/constants/testIds.ts
 create mode 100644 tests/system/utils/baseRegularFixture.ts
 create mode 100644 tests/system/utils/feeFixture.ts

diff --git a/src/renderer/entities/transaction/ui/FeeWithLabel/FeeWithLabel.tsx b/src/renderer/entities/transaction/ui/FeeWithLabel/FeeWithLabel.tsx
index e287469d29..9086545368 100644
--- a/src/renderer/entities/transaction/ui/FeeWithLabel/FeeWithLabel.tsx
+++ b/src/renderer/entities/transaction/ui/FeeWithLabel/FeeWithLabel.tsx
@@ -1,5 +1,6 @@
 import { type ComponentProps } from 'react';
 
+import { TEST_IDS } from '@/shared/constants';
 import { useI18n } from '@/shared/i18n';
 import { cnTw } from '@/shared/lib/utils';
 import { DetailRow, FootnoteText } from '@/shared/ui';
@@ -17,6 +18,7 @@ export const FeeWithLabel = ({ label, wrapperClassName, ...feeProps }: Props) =>
     <DetailRow
       label={<FootnoteText className="text-text-tertiary">{label || t('operation.networkFee')}</FootnoteText>}
       className={cnTw('text-text-primary', wrapperClassName)}
+      testId={TEST_IDS.OPERATIONS.ESTIMATE_FEE}
     >
       <Fee {...feeProps} />
     </DetailRow>
diff --git a/src/renderer/entities/wallet/ui/AccountsList/AccountsList.tsx b/src/renderer/entities/wallet/ui/AccountsList/AccountsList.tsx
index 8fd311b3ab..b003aa99f6 100644
--- a/src/renderer/entities/wallet/ui/AccountsList/AccountsList.tsx
+++ b/src/renderer/entities/wallet/ui/AccountsList/AccountsList.tsx
@@ -1,3 +1,4 @@
+import { TEST_IDS } from '@/shared/constants';
 import { type AccountId, type Chain } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { cnTw, toAddress } from '@/shared/lib/utils';
@@ -35,7 +36,7 @@ export const AccountsList = ({ accountId, chains, className }: Props) => {
                 <FootnoteText className="w-[180px] text-text-secondary">
                   <Address address={toAddress(accountId, { prefix: addressPrefix })} variant="truncate" showIcon />
                 </FootnoteText>
-                <AccountExplorers accountId={accountId} chain={chain} />
+                <AccountExplorers accountId={accountId} chain={chain} testId={TEST_IDS.COMMON.INFO_BUTTON} />
               </div>
             </li>
           );
diff --git a/src/renderer/features/assets/AssetsSettings/ui/AssetsSettings.tsx b/src/renderer/features/assets/AssetsSettings/ui/AssetsSettings.tsx
index 17f9f71ea6..7bde47ecd1 100644
--- a/src/renderer/features/assets/AssetsSettings/ui/AssetsSettings.tsx
+++ b/src/renderer/features/assets/AssetsSettings/ui/AssetsSettings.tsx
@@ -1,5 +1,6 @@
 import { useUnit } from 'effector-react';
 
+import { TEST_IDS } from '@/shared/constants';
 import { useI18n } from '@/shared/i18n';
 import { FootnoteText, IconButton, MenuPopover, Select, Switch } from '@/shared/ui';
 import { AssetsListView } from '@/entities/asset';
@@ -30,6 +31,7 @@ export const AssetsSettings = () => {
       position="top-full right-0"
       buttonClassName="rounded-full"
       offsetPx={0}
+      testId={TEST_IDS.ASSETS.SETTINGS_WIDGET}
       content={
         <>
           <Switch
diff --git a/src/renderer/features/operations/OperationsConfirm/Transfer/ui/Confirmation.tsx b/src/renderer/features/operations/OperationsConfirm/Transfer/ui/Confirmation.tsx
index d08edddfce..a3e2f6f92a 100644
--- a/src/renderer/features/operations/OperationsConfirm/Transfer/ui/Confirmation.tsx
+++ b/src/renderer/features/operations/OperationsConfirm/Transfer/ui/Confirmation.tsx
@@ -1,6 +1,7 @@
 import { useStoreMap, useUnit } from 'effector-react';
 import { type ReactNode } from 'react';
 
+import { TEST_IDS } from '@/shared/constants';
 import { useI18n } from '@/shared/i18n';
 import { Button, DetailRow, FootnoteText, Icon, Tooltip } from '@/shared/ui';
 import { TransactionDetails } from '@/shared/ui-entities';
@@ -123,6 +124,7 @@ export const Confirmation = ({ id = 0, secondaryActionButton, hideSignButton, on
         <DetailRow
           label={<FootnoteText className="text-text-tertiary">{t('operation.networkFee')}</FootnoteText>}
           className="text-text-primary"
+          testId={TEST_IDS.OPERATIONS.CONFIRM_NETWORK_FEE}
         >
           <div className="flex flex-col items-end gap-y-0.5">
             <AssetBalance value={confirmStore.fee} asset={confirmStore.chain.assets[0]} />
diff --git a/src/renderer/features/wallets/WalletSelect/ui/WalletButton.tsx b/src/renderer/features/wallets/WalletSelect/ui/WalletButton.tsx
index f41aafc0c4..d74160a4d2 100644
--- a/src/renderer/features/wallets/WalletSelect/ui/WalletButton.tsx
+++ b/src/renderer/features/wallets/WalletSelect/ui/WalletButton.tsx
@@ -1,3 +1,4 @@
+import { TEST_IDS } from '@/shared/constants';
 import { type Wallet } from '@/shared/core';
 import { Icon } from '@/shared/ui';
 import { Box, Popover } from '@/shared/ui-kit';
@@ -13,6 +14,7 @@ export const WalletButton = ({ wallet }: Props) => {
     <Popover.Trigger>
       <button
         type="button"
+        data-testid={TEST_IDS.COMMON.WALLET_BUTTON}
         className="w-full rounded-md border border-container-border bg-left-navigation-menu-background shadow-card-shadow"
       >
         <Box direction="row" verticalAlign="center" horizontalAlign="space-between" padding={3}>
diff --git a/src/renderer/pages/Onboarding/WatchOnly/WatchOnly.tsx b/src/renderer/pages/Onboarding/WatchOnly/WatchOnly.tsx
index f2cf6d928f..95a0c1e717 100644
--- a/src/renderer/pages/Onboarding/WatchOnly/WatchOnly.tsx
+++ b/src/renderer/pages/Onboarding/WatchOnly/WatchOnly.tsx
@@ -2,6 +2,7 @@ import { useUnit } from 'effector-react';
 import { useEffect, useState } from 'react';
 import { Controller, type SubmitHandler, useForm } from 'react-hook-form';
 
+import { TEST_IDS } from '@/shared/constants';
 import { type AccountId, type Chain } from '@/shared/core';
 import { AccountType, ChainType, CryptoType, ErrorType, SigningType, WalletType } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
@@ -125,6 +126,7 @@ const WatchOnly = ({ isOpen, onClose, onComplete }: Props) => {
                   placeholder={t('onboarding.walletNamePlaceholder')}
                   invalid={Boolean(errors.walletName)}
                   value={value}
+                  testId={TEST_IDS.ONBOARDING.WALLET_NAME_INPUT}
                   onChange={onChange}
                 />
                 <InputHint variant="error" active={errors.walletName?.type === ErrorType.MAX_LENGTH}>
@@ -154,6 +156,7 @@ const WatchOnly = ({ isOpen, onClose, onComplete }: Props) => {
                       {isValid ? <Identicon address={value} background={false} /> : <Icon name="emptyIdenticon" />}
                     </div>
                   }
+                  testId={TEST_IDS.ONBOARDING.WALLET_ADDRESS_INPUT}
                   onChange={onChange}
                 />
 
@@ -165,11 +168,11 @@ const WatchOnly = ({ isOpen, onClose, onComplete }: Props) => {
           />
 
           <div className="flex flex-1 items-end justify-between">
-            <Button variant="text" onClick={() => closeWowModal()}>
+            <Button variant="text" testId={TEST_IDS.COMMON.BACK_BUTTON} onClick={() => closeWowModal()}>
               {t('onboarding.backButton')}
             </Button>
 
-            <Button type="submit" disabled={!isValid}>
+            <Button type="submit" testId={TEST_IDS.COMMON.CONTINUE_BUTTON} disabled={!isValid}>
               {t('onboarding.continueButton')}
             </Button>
           </div>
diff --git a/src/renderer/pages/Onboarding/Welcome/Welcome.tsx b/src/renderer/pages/Onboarding/Welcome/Welcome.tsx
index 8c227c7263..d99c5677d4 100644
--- a/src/renderer/pages/Onboarding/Welcome/Welcome.tsx
+++ b/src/renderer/pages/Onboarding/Welcome/Welcome.tsx
@@ -1,6 +1,7 @@
 import throttle from 'lodash/throttle';
 import { useLayoutEffect, useRef, useState } from 'react';
 
+import { TEST_IDS } from '@/shared/constants';
 import { WalletType } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { cnTw } from '@/shared/lib/utils';
@@ -45,6 +46,7 @@ export const Welcome = () => {
             title={t('onboarding.welcome.polkadotVaultTitle')}
             description={t('onboarding.welcome.polkadotVaultDescription')}
             iconName="vaultOnboarding"
+            testId={TEST_IDS.ONBOARDING.VAULT_BUTTON}
             onClick={() => walletPairingModel.events.walletTypeSet(WalletType.POLKADOT_VAULT)}
           />
 
@@ -52,6 +54,7 @@ export const Welcome = () => {
             title={t('onboarding.welcome.novaWalletTitle')}
             description={t('onboarding.welcome.novaWalletDescription')}
             iconName="novaWalletOnboarding"
+            testId={TEST_IDS.ONBOARDING.NOVA_WALLET_BUTTON}
             onClick={() => walletPairingModel.events.walletTypeSet(WalletType.NOVA_WALLET)}
           />
 
@@ -59,6 +62,7 @@ export const Welcome = () => {
             title={t('onboarding.welcome.walletConnectTitle')}
             description={t('onboarding.welcome.walletConnectDescription')}
             iconName="walletConnectOnboarding"
+            testId={TEST_IDS.ONBOARDING.WALLET_CONNECT_BUTTON}
             onClick={() => walletPairingModel.events.walletTypeSet(WalletType.WALLET_CONNECT)}
           />
 
@@ -66,6 +70,7 @@ export const Welcome = () => {
             title={t('onboarding.welcome.watchOnlyTitle')}
             description={t('onboarding.welcome.watchOnlyDescription')}
             iconName="watchOnlyOnboarding"
+            testId={TEST_IDS.ONBOARDING.WATCH_ONLY_BUTTON}
             onClick={() => walletPairingModel.events.walletTypeSet(WalletType.WATCH_ONLY)}
           />
           <WelcomeCard
@@ -73,6 +78,7 @@ export const Welcome = () => {
             description={t('onboarding.welcome.ledgerDescription')}
             iconName="ledgerOnboarding"
             disabled
+            testId={TEST_IDS.ONBOARDING.LEDGER_BUTTON}
           />
         </div>
 
diff --git a/src/renderer/pages/Onboarding/Welcome/WelcomeCard.tsx b/src/renderer/pages/Onboarding/Welcome/WelcomeCard.tsx
index dc365907d5..eddea7382e 100644
--- a/src/renderer/pages/Onboarding/Welcome/WelcomeCard.tsx
+++ b/src/renderer/pages/Onboarding/Welcome/WelcomeCard.tsx
@@ -9,13 +9,15 @@ type Props = {
   iconName: IconNames;
   onClick?: () => void;
   disabled?: boolean;
+  testId?: string;
 };
 
-export const WelcomeCard = ({ title, description, iconName, disabled, onClick }: Props) => {
+export const WelcomeCard = ({ title, description, iconName, disabled, onClick, testId: testId }: Props) => {
   const { t } = useI18n();
 
   return (
     <button
+      data-testid={testId}
       disabled={disabled}
       className={cnTw(
         'flex items-center gap-4 rounded-lg border border-filter-border px-4 py-2 shadow-card-shadow',
diff --git a/src/renderer/shared/constants/index.ts b/src/renderer/shared/constants/index.ts
new file mode 100644
index 0000000000..44e95fb4c2
--- /dev/null
+++ b/src/renderer/shared/constants/index.ts
@@ -0,0 +1 @@
+export * from './testIds';
diff --git a/src/renderer/shared/constants/testIds.ts b/src/renderer/shared/constants/testIds.ts
new file mode 100644
index 0000000000..4b3e7a3c91
--- /dev/null
+++ b/src/renderer/shared/constants/testIds.ts
@@ -0,0 +1,24 @@
+export const TEST_IDS = {
+  ONBOARDING: {
+    VAULT_BUTTON: 'onboarding-vault-button',
+    WATCH_ONLY_BUTTON: 'onboarding-watch-only-button',
+    NOVA_WALLET_BUTTON: 'onboarding-nova-wallet-button',
+    WALLET_CONNECT_BUTTON: 'onboarding-wallet-connect-button',
+    LEDGER_BUTTON: 'onboarding-ledger-button',
+    WALLET_NAME_INPUT: 'onboarding-wallet-name-input',
+    WALLET_ADDRESS_INPUT: 'onboarding-wallet-address-input',
+  },
+  ASSETS: {
+    SETTINGS_WIDGET: 'assets-settings-widget',
+  },
+  COMMON: {
+    WALLET_BUTTON: 'common-wallet-button',
+    BACK_BUTTON: 'common-back-button',
+    CONTINUE_BUTTON: 'common-continue-button',
+    INFO_BUTTON: 'common-info-button',
+  },
+  OPERATIONS: {
+    CONFIRM_NETWORK_FEE: 'operations-confirm-network-fee',
+    ESTIMATE_FEE: 'operations-estimate-fee',
+  },
+} as const;
diff --git a/src/renderer/shared/ui-entities/AccountExplorer/AccountExplorers.tsx b/src/renderer/shared/ui-entities/AccountExplorer/AccountExplorers.tsx
index d6cafe3356..8563fcb6ad 100644
--- a/src/renderer/shared/ui-entities/AccountExplorer/AccountExplorers.tsx
+++ b/src/renderer/shared/ui-entities/AccountExplorer/AccountExplorers.tsx
@@ -10,9 +10,10 @@ import { Hash } from '../Hash/Hash';
 type Props = PropsWithChildren<{
   accountId: AccountId;
   chain: Chain;
+  testId?: string;
 }>;
 
-export const AccountExplorers = memo(({ accountId, chain, children }: Props) => {
+export const AccountExplorers = memo(({ accountId, chain, children, testId }: Props) => {
   const { t } = useI18n();
   const { explorers } = chain;
   const address = toAddress(accountId, { prefix: chain.addressPrefix });
@@ -20,7 +21,7 @@ export const AccountExplorers = memo(({ accountId, chain, children }: Props) =>
   return (
     <Popover align="end" dialog testId="AccountExplorers">
       <Popover.Trigger>
-        <IconButton name="details" className="text-icon-default" onClick={(e) => e.stopPropagation()} />
+        <IconButton name="details" className="text-icon-default" testId={testId} onClick={(e) => e.stopPropagation()} />
       </Popover.Trigger>
       <Popover.Content>
         <Box gap={2} padding={4} width="230px">
diff --git a/src/renderer/shared/ui/Buttons/IconButton/IconButton.tsx b/src/renderer/shared/ui/Buttons/IconButton/IconButton.tsx
index c9cf42d3be..ba94876ad6 100644
--- a/src/renderer/shared/ui/Buttons/IconButton/IconButton.tsx
+++ b/src/renderer/shared/ui/Buttons/IconButton/IconButton.tsx
@@ -19,6 +19,7 @@ type HTMLButtonProps = Pick<
 type Props = HTMLButtonProps &
   IconProps & {
     ariaLabel?: string;
+    testId?: string;
   };
 
 export const IconButton = forwardRef<HTMLButtonElement, Props>(
@@ -33,6 +34,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
       onPointerDown,
       onPointerMove,
       onPointerLeave,
+      testId,
       ...iconProps
     },
     ref,
@@ -43,6 +45,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
       className={cnTw('spektr-icon-button', IconButtonStyle, className)}
       aria-label={ariaLabel}
       disabled={disabled}
+      data-testid={testId}
       onClick={onClick}
       onMouseDown={onMouseDown}
       onPointerDown={onPointerDown}
diff --git a/src/renderer/shared/ui/DetailRow/DetailRow.tsx b/src/renderer/shared/ui/DetailRow/DetailRow.tsx
index f3f519ed40..dfe69e85d8 100644
--- a/src/renderer/shared/ui/DetailRow/DetailRow.tsx
+++ b/src/renderer/shared/ui/DetailRow/DetailRow.tsx
@@ -7,10 +7,14 @@ type Props = {
   label: ReactNode;
   className?: string;
   wrapperClassName?: string;
+  testId?: string;
 };
 
-export const DetailRow = ({ label, className, wrapperClassName, children }: PropsWithChildren<Props>) => (
-  <div className={cnTw('flex min-h-6 w-full items-center justify-between gap-2', wrapperClassName)}>
+export const DetailRow = ({ label, className, wrapperClassName, testId, children }: PropsWithChildren<Props>) => (
+  <div
+    className={cnTw('flex min-h-6 w-full items-center justify-between gap-2', wrapperClassName)}
+    data-testid={testId}
+  >
     {typeof label === 'string' ? (
       <FootnoteText as="dt" className="text-text-tertiary">
         {label}
diff --git a/src/renderer/shared/ui/Inputs/Input/Input.tsx b/src/renderer/shared/ui/Inputs/Input/Input.tsx
index 75c5621671..f5bb92e40b 100644
--- a/src/renderer/shared/ui/Inputs/Input/Input.tsx
+++ b/src/renderer/shared/ui/Inputs/Input/Input.tsx
@@ -15,6 +15,7 @@ type NewType = {
   theme?: Theme;
   onChange?: (value: string) => void;
   onPaste?: (event: ClipboardEvent) => void;
+  testId?: string;
 };
 
 export type Props = Pick<ComponentPropsWithoutRef<'input'>, HTMLInputProps> & NewType;
@@ -35,6 +36,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
       spellCheck = false,
       theme = 'light',
       autoFocus,
+      testId,
       ...props
     },
     ref,
@@ -68,6 +70,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
           autoFocus={autoFocus}
           disabled={disabled}
           spellCheck={spellCheck}
+          data-testid={testId}
           onChange={(event) => onChange?.(event.target.value)}
           onPaste={(event) => onPaste?.(event)}
           {...props}
diff --git a/src/renderer/shared/ui/Popovers/MenuPopover/MenuPopover.tsx b/src/renderer/shared/ui/Popovers/MenuPopover/MenuPopover.tsx
index 8e17c7f1d2..84190ddb5a 100644
--- a/src/renderer/shared/ui/Popovers/MenuPopover/MenuPopover.tsx
+++ b/src/renderer/shared/ui/Popovers/MenuPopover/MenuPopover.tsx
@@ -11,6 +11,7 @@ type Props = {
   offsetPx?: number;
   position?: string;
   closeOnClick?: boolean;
+  testId?: string;
 };
 
 export const MenuPopover = ({
@@ -22,6 +23,7 @@ export const MenuPopover = ({
   offsetPx = 7,
   position = 'left-0 top-full',
   closeOnClick = false,
+  testId,
 }: PropsWithChildren<Props>) => {
   const menuRef = useRef<HTMLDivElement>(null);
 
@@ -34,7 +36,11 @@ export const MenuPopover = ({
     <Menu>
       {({ open, close }) => (
         <div className={cnTw('relative', open && 'z-20', containerClassName)}>
-          <Menu.Button className={cnTw('flex items-center', buttonClassName)} onClick={onMenuClick}>
+          <Menu.Button
+            className={cnTw('flex items-center', buttonClassName)}
+            data-testid={testId}
+            onClick={onMenuClick}
+          >
             {children}
           </Menu.Button>
           <Menu.Items
diff --git a/tests/system/data/chains/chainsList.ts b/tests/system/data/chains/chainsList.ts
index fad3aa2982..0319232534 100644
--- a/tests/system/data/chains/chainsList.ts
+++ b/tests/system/data/chains/chainsList.ts
@@ -1,8 +1,9 @@
 export const substrateChains = [
   { name: 'Polkadot' },
   { name: 'Kusama' },
-  { name: 'Westend' },
   { name: 'Kusama Asset Hub' },
+  { name: 'Polkadot People' },
+  { name: 'Kusama People' },
   { name: 'Karura' },
   { name: 'Shiden' },
   { name: 'Bifrost Kusama' },
@@ -19,11 +20,10 @@ export const substrateChains = [
   { name: 'Robonomics' },
   { name: 'Kintsugi' },
   { name: 'Zeitgeist' },
-  { name: 'Litmus' },
   { name: 'Subsocial' },
   { name: 'Integritee Parachain' },
   { name: 'Centrifuge Parachain' },
-  { name: 'HydraDX' },
+  { name: 'Hydration' },
   { name: 'Interlay' },
   { name: 'Phala' },
   { name: 'Turing' },
@@ -35,11 +35,14 @@ export const substrateChains = [
   { name: 'Tinkernet' },
   { name: 'Amplitude' },
   { name: 'Pendulum' },
+  { name: 'Bittensor' },
   { name: 'Vara' },
   { name: 'Polkadot Bridge Hub' },
   { name: 'Kusama Bridge Hub' },
   { name: 'Polkadot Collectives' },
-  { name: 'Kusama People' },
+  { name: 'Polimec' },
+  { name: 'Avail' },
+  { name: 'Westend' },
 ];
 
 export const ethChains = [{ name: 'Moonbeam' }, { name: 'Moonriver' }];
diff --git a/tests/system/pages/BaseModalWindow.ts b/tests/system/pages/BaseModalWindow.ts
index c85d35f8b3..0bcc00ba85 100644
--- a/tests/system/pages/BaseModalWindow.ts
+++ b/tests/system/pages/BaseModalWindow.ts
@@ -8,32 +8,20 @@ export abstract class BaseModal<T extends BaseModalElements = BaseModalElements>
     public pageElements: T,
   ) {}
 
-  async click(selector: string) {
-    await this.page.click(selector);
+  async click(testId: string) {
+    await this.page.getByTestId(testId).click();
 
     return this;
   }
 
-  async fill(selector: string, value: string) {
-    await this.page.fill(selector, value);
+  async fill(testId: string, value: string) {
+    await this.page.getByTestId(testId).fill(value);
 
     return this;
   }
 
-  async clickIntoField(placeholder: string) {
-    await this.page.getByPlaceholder(placeholder).click();
-
-    return this;
-  }
-
-  async fillFieldByValue(placeholder: string, value: string) {
-    await this.page.getByPlaceholder(placeholder).fill(value);
-
-    return this;
-  }
-
-  async clickOnButton(name: string) {
-    await this.page.getByRole('button', { name: name }).click();
+  async clickIntoField(testId: string) {
+    await this.page.getByTestId(testId).click();
 
     return this;
   }
diff --git a/tests/system/pages/BasePage.ts b/tests/system/pages/BasePage.ts
index c011fa97dd..df6ca11228 100644
--- a/tests/system/pages/BasePage.ts
+++ b/tests/system/pages/BasePage.ts
@@ -21,8 +21,8 @@ export abstract class BasePage<T extends BasePageElements = BasePageElements> {
     return this;
   }
 
-  async click(selector: string) {
-    await this.page.click(selector);
+  async click(testId: string) {
+    await this.page.getByTestId(testId).click();
 
     return this;
   }
@@ -32,28 +32,4 @@ export abstract class BasePage<T extends BasePageElements = BasePageElements> {
 
     return this;
   }
-
-  async clickIntoField(placeholder: string) {
-    await this.page.getByPlaceholder(placeholder).click();
-
-    return this;
-  }
-
-  async fillFieldByValue(placeholder: string, value: string) {
-    await this.page.getByPlaceholder(placeholder).fill(value);
-
-    return this;
-  }
-
-  async clickOnButton(name: string) {
-    await this.page.getByRole('button', { name: name }).click();
-
-    return this;
-  }
-
-  async clickOnButtonBySelector(selector: string, force = false) {
-    await this.page.locator(selector).getByRole('button').click({ force: force });
-
-    return this;
-  }
 }
diff --git a/tests/system/pages/_elements/AssetsPageElements.ts b/tests/system/pages/_elements/AssetsPageElements.ts
index ae4464c422..0eaa0789ff 100644
--- a/tests/system/pages/_elements/AssetsPageElements.ts
+++ b/tests/system/pages/_elements/AssetsPageElements.ts
@@ -1,8 +1,9 @@
+import { TEST_IDS } from '@/shared/constants';
+
 import { type BasePageElements } from './BasePageElements';
 
 export class AssetsPageElements implements BasePageElements {
   url = '/#/assets';
-  accountButton = 'test_account $';
+  accountButton = TEST_IDS.COMMON.WALLET_BUTTON;
   assetsPageLocator = 'text=Portfolio';
-  settingsModalWindowButtonSelector = '[id="headlessui-menu-button-\\:r3\\:"]';
 }
diff --git a/tests/system/pages/_elements/LoginPageElements.ts b/tests/system/pages/_elements/LoginPageElements.ts
index d5d6a07673..8e11ca5b84 100644
--- a/tests/system/pages/_elements/LoginPageElements.ts
+++ b/tests/system/pages/_elements/LoginPageElements.ts
@@ -1,14 +1,16 @@
+import { TEST_IDS } from '@/shared/constants';
+
 import { type BasePageElements } from './BasePageElements';
 
 export class LoginPageElements implements BasePageElements {
   url = '/#/onboarding';
-  enterAccountAddress = 'Enter or paste your account address';
-  accountNameField = 'Enter a name for your wallet';
-  watchOnlyButton = 'Watch-only';
-  polkadotVaultButton = 'Polkadot Vault';
-  continueButton = 'Continue';
+  enterAccountAddress = TEST_IDS.ONBOARDING.WALLET_ADDRESS_INPUT;
+  accountNameField = TEST_IDS.ONBOARDING.WALLET_NAME_INPUT;
+  watchOnlyButton = TEST_IDS.ONBOARDING.WATCH_ONLY_BUTTON;
+  polkadotVaultButton = TEST_IDS.ONBOARDING.VAULT_BUTTON;
+  continueButton = TEST_IDS.COMMON.CONTINUE_BUTTON;
   accessDeniedText = 'text=Access denied!';
-  firstInfoButton = '[id="headlessui-popover-button-\\:r8\\:"]';
+  firstInfoButton = TEST_IDS.COMMON.INFO_BUTTON;
   subscanLabel = 'View on Subscan';
   onboardingLabel = 'Add your wallet';
 }
diff --git a/tests/system/pages/_elements/TransferModalElements.ts b/tests/system/pages/_elements/TransferModalElements.ts
index 2e39ab887a..2b1d9e33da 100644
--- a/tests/system/pages/_elements/TransferModalElements.ts
+++ b/tests/system/pages/_elements/TransferModalElements.ts
@@ -1,9 +1,10 @@
+import { TEST_IDS } from '@/shared/constants';
+
 export class TransferModalElements {
   static addButton = 'Add';
   static multisigButton = 'Multisig';
-  static feePattern = /^\d+\.\d+\s+\w+$/;
-  static feeRowLocator = 'div.flex.justify-between.items-center.w-full';
-  static feeLocator = 'dd > div > span.text-body.text-text-primary';
+  static feePattern = /^Network fee\d+\.\d+\s+[A-Z]+\$\d+\.\d+$/;
+  static feeRowLocator = TEST_IDS.OPERATIONS.ESTIMATE_FEE;
 
   static getUrl(chainId: number, assetId: number): string {
     if (chainId === undefined || assetId === undefined) {
diff --git a/tests/system/pages/assetsPage/VaultAssetsPage.ts b/tests/system/pages/assetsPage/VaultAssetsPage.ts
index cbc3497c01..4058576195 100644
--- a/tests/system/pages/assetsPage/VaultAssetsPage.ts
+++ b/tests/system/pages/assetsPage/VaultAssetsPage.ts
@@ -1,3 +1,4 @@
+import { TEST_IDS } from '@/shared/constants';
 import { type ChainModel } from '../../data/chains/testChainModel';
 import { readConfig } from '../../utils/readConfig';
 import { BasePage } from '../BasePage';
@@ -17,13 +18,13 @@ export class VaultAssetsPage extends BasePage<AssetsPageElements> {
   }
 
   public async openWalletManagement(): Promise<WalletModalWindow> {
-    await this.clickOnButton(this.pageElements.accountButton);
+    await this.click(this.pageElements.accountButton);
 
     return new WalletModalWindow(this.page, new WalletModalElements(), this);
   }
 
   public async openSettingsWidget(): Promise<AssetsSettingsModalWindow> {
-    await this.page.getByRole('main').getByRole('button').nth(1).click();
+    await this.page.getByTestId(TEST_IDS.ASSETS.SETTINGS_WIDGET).click();
 
     return new AssetsSettingsModalWindow(this.page, new AssetsSettingsModalElements(), this);
   }
diff --git a/tests/system/pages/assetsPage/WatchOnlyAssetsPage.ts b/tests/system/pages/assetsPage/WatchOnlyAssetsPage.ts
index 163af34da8..26ffc34370 100644
--- a/tests/system/pages/assetsPage/WatchOnlyAssetsPage.ts
+++ b/tests/system/pages/assetsPage/WatchOnlyAssetsPage.ts
@@ -11,7 +11,7 @@ export class WatchOnlyAssetsPage extends BasePage<AssetsPageElements> {
   }
 
   public async openWalletManagement(): Promise<WalletModalWindow> {
-    await this.clickOnButton(this.pageElements.accountButton);
+    await this.click(this.pageElements.accountButton);
 
     return new WalletModalWindow(this.page, new WalletModalElements(), this);
   }
diff --git a/tests/system/pages/loginPage/BaseLoginPage.ts b/tests/system/pages/loginPage/BaseLoginPage.ts
index c766323b6b..cbb67b2f94 100644
--- a/tests/system/pages/loginPage/BaseLoginPage.ts
+++ b/tests/system/pages/loginPage/BaseLoginPage.ts
@@ -19,7 +19,7 @@ import { VaultAssetsPage } from '../assetsPage/VaultAssetsPage';
 import { type WatchOnlyAssetsPage } from '../assetsPage/WatchOnlyAssetsPage';
 
 import { PolkadotVaultLoginPage } from './PolkadotVaultLoginPage';
-import { WatchOnlyLoginPage } from './WatchOnlyLoginPage';
+import { WatchOnlyOnboardingPage } from './WatchOnlyLoginPage';
 
 export class BaseLoginPage extends BasePage<LoginPageElements> {
   public async gotoOnboarding(): Promise<BaseLoginPage> {
@@ -29,14 +29,14 @@ export class BaseLoginPage extends BasePage<LoginPageElements> {
     return this;
   }
 
-  public async clickWatchOnlyButton(): Promise<WatchOnlyLoginPage> {
-    await this.clickOnButton(this.pageElements.watchOnlyButton);
+  public async clickWatchOnlyButton(): Promise<WatchOnlyOnboardingPage> {
+    await this.click(this.pageElements.watchOnlyButton);
 
-    return new WatchOnlyLoginPage(this.page, this.pageElements);
+    return new WatchOnlyOnboardingPage(this.page, this.pageElements);
   }
 
   public async clickPolkadotVaultButton(): Promise<PolkadotVaultLoginPage> {
-    await this.clickOnButton(this.pageElements.polkadotVaultButton);
+    await this.click(this.pageElements.polkadotVaultButton);
 
     return new PolkadotVaultLoginPage(this.page, this.pageElements);
   }
diff --git a/tests/system/pages/loginPage/WatchOnlyLoginPage.ts b/tests/system/pages/loginPage/WatchOnlyLoginPage.ts
index 407fca53ac..55608ebf4c 100644
--- a/tests/system/pages/loginPage/WatchOnlyLoginPage.ts
+++ b/tests/system/pages/loginPage/WatchOnlyLoginPage.ts
@@ -1,19 +1,18 @@
 import { BasePage } from '../BasePage';
 import { AssetsPageElements } from '../_elements/AssetsPageElements';
-import { type LoginPageElements } from '../_elements/LoginPageElements';
+import { type LoginPageElements as OnboardingPageElements } from '../_elements/LoginPageElements';
 import { WatchOnlyAssetsPage } from '../assetsPage/WatchOnlyAssetsPage';
 
-export class WatchOnlyLoginPage extends BasePage<LoginPageElements> {
-  public async fillAccountAddress(address: string): Promise<WatchOnlyLoginPage> {
-    await this.clickIntoField(this.pageElements.enterAccountAddress);
-    await this.fillFieldByValue(this.pageElements.enterAccountAddress, address);
+export class WatchOnlyOnboardingPage extends BasePage<OnboardingPageElements> {
+  public async fillAccountAddress(address: string): Promise<WatchOnlyOnboardingPage> {
+    await this.click(this.pageElements.enterAccountAddress);
+    await this.page.getByTestId(this.pageElements.enterAccountAddress).fill(address);
 
     return this;
   }
 
-  public async fillWalletName(name: string): Promise<WatchOnlyLoginPage> {
-    await this.clickIntoField(this.pageElements.accountNameField);
-    await this.fillFieldByValue(this.pageElements.accountNameField, name);
+  public async fillWalletName(name: string): Promise<WatchOnlyOnboardingPage> {
+    await this.page.getByTestId(this.pageElements.accountNameField).fill(name);
 
     return this;
   }
@@ -21,14 +20,14 @@ export class WatchOnlyLoginPage extends BasePage<LoginPageElements> {
   public async createWatchOnlyAccount(name: string, address: string): Promise<WatchOnlyAssetsPage> {
     await this.fillWalletName(name);
     await this.fillAccountAddress(address);
-    await this.clickOnButton(this.pageElements.continueButton);
+    await this.click(this.pageElements.continueButton);
     await this.page.waitForTimeout(5000); // takes some time to load the app and balances
 
     return new WatchOnlyAssetsPage(this.page, new AssetsPageElements());
   }
 
-  public async clickInfoButton(): Promise<WatchOnlyLoginPage> {
-    await this.page.locator(this.pageElements.firstInfoButton).getByRole('button').nth(1).click();
+  public async clickFirstInfoButton(): Promise<WatchOnlyOnboardingPage> {
+    await this.page.getByTestId(this.pageElements.firstInfoButton).first().click();
 
     return this;
   }
diff --git a/tests/system/pages/modals/TransferModalWindow.ts b/tests/system/pages/modals/TransferModalWindow.ts
index 2c62a420a4..e24f4227f2 100644
--- a/tests/system/pages/modals/TransferModalWindow.ts
+++ b/tests/system/pages/modals/TransferModalWindow.ts
@@ -39,9 +39,8 @@ export class TransferModalWindow extends BaseModal<TransferModalElements> {
   }
 
   private async expectTransferFeeNotZero(): Promise<void> {
-    const feeRow = this.page.locator(TransferModalElements.feeRowLocator);
-    const feeLocator = feeRow.locator(TransferModalElements.feeLocator);
-    const feeText = await feeLocator.textContent();
+    const feeRow = this.page.getByTestId(TransferModalElements.feeRowLocator);
+    const feeText = await feeRow.textContent();
     expect(feeText).toMatch(TransferModalElements.feePattern);
   }
 
diff --git a/tests/system/pages/modals/WalletModalWindow.ts b/tests/system/pages/modals/WalletModalWindow.ts
index b304a3536c..e57cc41740 100644
--- a/tests/system/pages/modals/WalletModalWindow.ts
+++ b/tests/system/pages/modals/WalletModalWindow.ts
@@ -13,13 +13,13 @@ export class WalletModalWindow extends BaseModal<WalletModalElements> {
   }
 
   public async openWalletModelWindow(): Promise<WalletModalWindow> {
-    await this.previousPage.clickOnButton((this.previousPage as any).pageElements.accountButton);
+    await this.previousPage.click(this.previousPage.pageElements.url);
 
     return this;
   }
 
   public async clickOnAddButton(): Promise<WalletModalWindow> {
-    await this.clickOnButton(this.pageElements.addButton);
+    await this.click(this.pageElements.addButton);
 
     return this;
   }
diff --git a/tests/system/tests/assets/load.eth.fee.test.ts b/tests/system/tests/assets/load.eth.fee.test.ts
index 90d26b56a0..cc5c035695 100644
--- a/tests/system/tests/assets/load.eth.fee.test.ts
+++ b/tests/system/tests/assets/load.eth.fee.test.ts
@@ -1,10 +1,5 @@
-import { test } from '@playwright/test';
-import { type Browser, type BrowserContext, type Page, chromium } from 'playwright';
-
 import { ethChains } from '../../data/chains/chainsList';
-import { LoginPageElements } from '../../pages/_elements/LoginPageElements';
-import { type VaultAssetsPage } from '../../pages/assetsPage/VaultAssetsPage';
-import { BaseLoginPage } from '../../pages/loginPage/BaseLoginPage';
+import { test } from '../../utils/feeFixture';
 
 test.describe(
   'Load Transfer fee as ethereum_based polkadot Vault wallet',
@@ -12,27 +7,8 @@ test.describe(
     tag: '@fee-test',
   },
   () => {
-    let browser: Browser;
-    let context: BrowserContext;
-    let page: Page;
-    let loginPage: BaseLoginPage;
-    let vaultWallet: VaultAssetsPage;
-
-    test.beforeAll(async () => {
-      browser = await chromium.launch();
-      context = await browser.newContext({ ignoreHTTPSErrors: true, permissions: [] });
-      page = await context.newPage();
-      loginPage = new BaseLoginPage(page, new LoginPageElements());
-      await loginPage.gotoOnboarding();
-      vaultWallet = await loginPage.createVaultEthWallet();
-    });
-
-    test.afterAll(async () => {
-      await browser.close();
-    });
-
     ethChains.forEach((chain) => {
-      test(`Can load fee for ${chain.name}`, async () => {
+      test(`Can load fee for ${chain.name}`, async ({ vaultWallet }) => {
         test.slow();
         const assetsPage = await vaultWallet.gotoMain();
         await assetsPage.checkTransferFee(chain);
diff --git a/tests/system/tests/assets/load.fee.test.ts b/tests/system/tests/assets/load.fee.test.ts
index 686acbd5c8..6a1d6a89ed 100644
--- a/tests/system/tests/assets/load.fee.test.ts
+++ b/tests/system/tests/assets/load.fee.test.ts
@@ -1,10 +1,5 @@
-import { test } from '@playwright/test';
-import { type Browser, type BrowserContext, type Page, chromium } from 'playwright';
-
 import { substrateChains } from '../../data/chains/chainsList';
-import { LoginPageElements } from '../../pages/_elements/LoginPageElements';
-import { type VaultAssetsPage } from '../../pages/assetsPage/VaultAssetsPage';
-import { BaseLoginPage } from '../../pages/loginPage/BaseLoginPage';
+import { test } from '../../utils/feeFixture';
 
 test.describe(
   'Load Transfer fee as Substrate Polkadot Vault',
@@ -12,27 +7,8 @@ test.describe(
     tag: '@fee-test',
   },
   () => {
-    let browser: Browser;
-    let context: BrowserContext;
-    let page: Page;
-    let loginPage: BaseLoginPage;
-    let vaultWallet: VaultAssetsPage;
-
-    test.beforeAll(async () => {
-      browser = await chromium.launch();
-      context = await browser.newContext({ ignoreHTTPSErrors: true, permissions: [] });
-      page = await context.newPage();
-      loginPage = new BaseLoginPage(page, new LoginPageElements());
-      await loginPage.gotoOnboarding();
-      vaultWallet = await loginPage.createVaultSubstrateWallet();
-    });
-
-    test.afterAll(async () => {
-      await browser.close();
-    });
-
     substrateChains.forEach((chain) => {
-      test(`Can load fee for ${chain.name}`, async () => {
+      test(`Can load fee for ${chain.name}`, async ({ vaultWallet }) => {
         test.slow();
         const assetsPage = await vaultWallet.gotoMain();
         await assetsPage.checkTransferFee(chain);
diff --git a/tests/system/tests/onboarding/vault.onboarding.system.test.ts b/tests/system/tests/onboarding/vault.onboarding.system.test.ts
index 469e802750..439222ca4d 100644
--- a/tests/system/tests/onboarding/vault.onboarding.system.test.ts
+++ b/tests/system/tests/onboarding/vault.onboarding.system.test.ts
@@ -1,55 +1,24 @@
-import { expect, test } from '@playwright/test';
-import { type Browser, type BrowserContext, type Page, chromium } from 'playwright';
-
-import { LoginPageElements } from '../../pages/_elements/LoginPageElements';
-import { BaseLoginPage } from '../../pages/loginPage/BaseLoginPage';
-
-test.describe(
-  'Polkadot Vault onboarding',
-  {
-    tag: '@regress',
-  },
-  () => {
-    let browser: Browser;
-    let context: BrowserContext;
-    let page: Page;
-    let loginPage: BaseLoginPage;
-
-    test.beforeAll(async () => {
-      browser = await chromium.launch();
-    });
-
-    test.afterAll(async () => {
-      await browser.close();
-    });
-
-    test('Show access denied if no permissions', async () => {
-      context = await browser.newContext({ ignoreHTTPSErrors: true, permissions: [] });
-      page = await context.newPage();
-      loginPage = new BaseLoginPage(page, new LoginPageElements());
-
-      const polkadotVaultOnboardingPage = await loginPage
-        .gotoOnboarding()
-        .then((onboarding) => onboarding.clickPolkadotVaultButton());
-      const { accessDeniedText } = polkadotVaultOnboardingPage.pageElements;
-      await page.waitForSelector(accessDeniedText);
-      expect(await page.isVisible(accessDeniedText));
-    });
-
-    test('Default settings for assets page', async () => {
-      test.slow();
-      context = await browser.newContext({ ignoreHTTPSErrors: true, permissions: [] });
-      page = await context.newPage();
-      loginPage = new BaseLoginPage(page, new LoginPageElements());
-
-      const vaultWallet = await loginPage.createVaultSubstrateWallet();
-      const assetsPage = await vaultWallet.gotoMain();
-      const settingsWidget = await assetsPage.openSettingsWidget();
-      const hideZeroBalancesStatus = await settingsWidget.getHideZeroBalancesStatus();
-      const pageViewStatus = await settingsWidget.getpageViewStatus();
-
-      expect(hideZeroBalancesStatus).toBe(false);
-      expect(pageViewStatus).toBe(settingsWidget.pageElements.tokenCentric);
-    });
-  },
-);
+import { expect, test } from '../../utils/baseRegularFixture';
+
+test.describe('Polkadot Vault onboarding', { tag: '@regress' }, () => {
+  test('Show access denied if no permissions', async ({ loginPage, page }) => {
+    const polkadotVaultOnboardingPage = await loginPage
+      .gotoOnboarding()
+      .then((onboarding) => onboarding.clickPolkadotVaultButton());
+    const { accessDeniedText } = polkadotVaultOnboardingPage.pageElements;
+    await page.waitForSelector(accessDeniedText);
+    expect(await page.isVisible(accessDeniedText));
+  });
+
+  test('Default settings for assets page', async ({ loginPage }) => {
+    test.slow();
+    const vaultWallet = await loginPage.createVaultSubstrateWallet();
+    const assetsPage = await vaultWallet.gotoMain();
+    const settingsWidget = await assetsPage.openSettingsWidget();
+    const hideZeroBalancesStatus = await settingsWidget.getHideZeroBalancesStatus();
+    const pageViewStatus = await settingsWidget.getpageViewStatus();
+
+    expect(hideZeroBalancesStatus).toBe(false);
+    expect(pageViewStatus).toBe(settingsWidget.pageElements.tokenCentric);
+  });
+});
diff --git a/tests/system/tests/onboarding/watch.only.onboarding.system.test.ts b/tests/system/tests/onboarding/watch.only.onboarding.system.test.ts
index cdc7ab1681..845db993c6 100644
--- a/tests/system/tests/onboarding/watch.only.onboarding.system.test.ts
+++ b/tests/system/tests/onboarding/watch.only.onboarding.system.test.ts
@@ -1,9 +1,5 @@
-import { expect, test } from '@playwright/test';
-import { type Browser, type BrowserContext, type Page, chromium } from 'playwright';
-
 import { baseTestConfig } from '../../BaseTestConfig';
-import { LoginPageElements } from '../../pages/_elements/LoginPageElements';
-import { BaseLoginPage } from '../../pages/loginPage/BaseLoginPage';
+import { expect, test } from '../../utils/baseRegularFixture';
 
 test.describe(
   'Watch only wallet onboarding',
@@ -11,25 +7,7 @@ test.describe(
     tag: '@regress',
   },
   () => {
-    let browser: Browser;
-    let context: BrowserContext;
-    let page: Page;
-    let loginPage: BaseLoginPage;
-    test.beforeAll(async () => {
-      browser = await chromium.launch();
-    });
-
-    test.afterAll(async () => {
-      await browser.close();
-    });
-
-    test.beforeEach(async () => {
-      context = await browser.newContext({ ignoreHTTPSErrors: true });
-      page = await context.newPage();
-      loginPage = new BaseLoginPage(page, new LoginPageElements());
-    });
-
-    test('Can add watch only wallet', async () => {
+    test('Can add watch only wallet', async ({ loginPage, page }) => {
       const watchOnlyPage = await loginPage.gotoOnboarding().then((onboarding) => onboarding.clickWatchOnlyButton());
       const watchOnlyAssetsPage = await watchOnlyPage.createWatchOnlyAccount(
         baseTestConfig.test_name,
@@ -38,9 +16,11 @@ test.describe(
       expect(await page.isVisible(watchOnlyAssetsPage.pageElements.assetsPageLocator)).toBeTruthy();
     });
 
-    test('Link from info button lead to subscan', async () => {
+    test('Link from info button lead to subscan', async ({ loginPage, page, context }) => {
       const watchOnlyPage = await loginPage.gotoOnboarding().then((onboarding) => onboarding.clickWatchOnlyButton());
-      await watchOnlyPage.fillAccountAddress(baseTestConfig.test_address).then((account) => account.clickInfoButton());
+      await watchOnlyPage
+        .fillAccountAddress(baseTestConfig.test_address)
+        .then((account) => account.clickFirstInfoButton());
       const [newPage] = await Promise.all([
         context.waitForEvent('page'),
         page.getByRole('link', { name: watchOnlyPage.pageElements.subscanLabel }).click(),
diff --git a/tests/system/utils/baseRegularFixture.ts b/tests/system/utils/baseRegularFixture.ts
new file mode 100644
index 0000000000..de8ecbc394
--- /dev/null
+++ b/tests/system/utils/baseRegularFixture.ts
@@ -0,0 +1,39 @@
+import { test as base } from '@playwright/test';
+import { type Browser, type BrowserContext, type Page, chromium } from 'playwright';
+
+import { LoginPageElements } from '../pages/_elements/LoginPageElements';
+import { BaseLoginPage } from '../pages/loginPage/BaseLoginPage';
+
+type BaseFixture = {
+  browser: Browser;
+  context: BrowserContext;
+  page: Page;
+  loginPage: BaseLoginPage;
+};
+
+export const test = base.extend<BaseFixture>({
+  // eslint-disable-next-line no-empty-pattern
+  browser: async ({}: any, use: (arg0: Browser) => any) => {
+    const browser = await chromium.launch();
+    await use(browser);
+    await browser.close();
+  },
+
+  context: async ({ browser }, use) => {
+    const context = await browser.newContext({ ignoreHTTPSErrors: true, permissions: [] });
+    await use(context);
+    await context.close();
+  },
+
+  page: async ({ context }, use) => {
+    const page = await context.newPage();
+    await use(page);
+  },
+
+  loginPage: async ({ page }, use) => {
+    const loginPage = new BaseLoginPage(page, new LoginPageElements());
+    await use(loginPage);
+  },
+});
+
+export { expect } from '@playwright/test';
diff --git a/tests/system/utils/feeFixture.ts b/tests/system/utils/feeFixture.ts
new file mode 100644
index 0000000000..4565b76ec4
--- /dev/null
+++ b/tests/system/utils/feeFixture.ts
@@ -0,0 +1,19 @@
+import { type VaultAssetsPage } from '../pages/assetsPage/VaultAssetsPage';
+
+import { test as base } from './baseRegularFixture';
+
+type FeeFixture = {
+  vaultWallet: VaultAssetsPage;
+};
+
+export const test = base.extend<FeeFixture>({
+  vaultWallet: async ({ loginPage }, use, testInfo) => {
+    await loginPage.gotoOnboarding();
+    const vaultWallet = testInfo.title.includes('ethereum')
+      ? await loginPage.createVaultEthWallet()
+      : await loginPage.createVaultSubstrateWallet();
+    await use(vaultWallet);
+  },
+});
+
+export { expect } from '@playwright/test';
diff --git a/tests/system/utils/interactWithDatabase.ts b/tests/system/utils/interactWithDatabase.ts
index 949f5adfb4..fa979b1f72 100644
--- a/tests/system/utils/interactWithDatabase.ts
+++ b/tests/system/utils/interactWithDatabase.ts
@@ -17,25 +17,21 @@ export interface IndexedDBData {
  *   successfully injected.
  */
 export async function injectDataInDatabase(page: Page, data: IndexedDBData): Promise<void> {
-  await page.evaluate(async (data) => {
-    if (!('indexedDB' in window)) {
-      console.log("This browser doesn't support IndexedDB.");
-    } else {
-      const { database, table, injectingData } = data;
-      const dbPromise = window.indexedDB.open(database);
+  await page.evaluate(async (data: IndexedDBData) => {
+    const { database, table, injectingData } = data;
+    const dbPromise = indexedDB.open(database);
 
-      while (dbPromise.readyState == 'pending') {
-        await new Promise((resolve) => {
-          setTimeout(resolve, 1_000);
-        });
-        console.log('waiting');
-      }
-      const tx = dbPromise.result.transaction(table, 'readwrite');
-      console.log(tx);
-      const store = tx.objectStore(table);
-      injectingData.forEach((item) => {
-        store.put(item);
+    while (dbPromise.readyState == 'pending') {
+      await new Promise((resolve) => {
+        setTimeout(resolve, 1_000);
       });
+      console.log('waiting');
+    }
+    const tx = dbPromise.result.transaction(table, 'readwrite');
+    console.log(tx);
+    const store = tx.objectStore(table);
+    for (const item of injectingData) {
+      store.put(item);
     }
   }, data);
 }
diff --git a/tsconfig.json b/tsconfig.json
index 5c78ecceaa..9b756d6259 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,7 @@
     "strict": true,
     "target": "es2022",
     "module": "es2022",
-    "lib": ["es2022"],
+    "lib": ["es2022", "dom"],
     "jsx": "react-jsx",
     "pretty": true,
     "importHelpers": true,