test: [POM] fix change language flaky tests and migrate tests to Page Object Model

test/e2e/page-objects/common.ts

@@ -1 +1,4 @@
-export type RawLocator = string | { css: string; text: string };
+export type RawLocator =
+  | string
+  | { css?: string; text?: string }
+  | { tag: string; text: string };

test/e2e/page-objects/pages/settings/advanced-settings.ts

@@ -0,0 +1,32 @@
+import { Driver } from '../../../webdriver/driver';
+
+class AdvancedSettings {
+  private readonly driver: Driver;
+
+  private readonly downloadDataButton = '[data-testid="export-data-button"]';
+
+  private readonly downloadStateLogsButton =
+    '[data-testid="advanced-setting-state-logs"]';
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForMultipleSelectors([
+        this.downloadStateLogsButton,
+        this.downloadDataButton,
+      ]);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for Advanced Settings page to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('Advanced Settings page is loaded');
+  }
+}
+
+export default AdvancedSettings;

test/e2e/page-objects/pages/settings/general-settings.ts

@@ -0,0 +1,61 @@
+import { Driver } from '../../../webdriver/driver';
+
+class GeneralSettings {
+  private readonly driver: Driver;
+
+  private readonly generalSettingsPageTitle = {
+    text: 'General',
+    tag: 'h4',
+  };
+
+  private readonly loadingOverlaySpinner = '.loading-overlay__spinner';
+
+  private readonly selectLanguageField = '[data-testid="locale-select"]';
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.check_noLoadingOverlaySpinner();
+      await this.driver.waitForMultipleSelectors([
+        this.generalSettingsPageTitle,
+        this.selectLanguageField,
+      ]);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for General Settings page to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('General Settings page is loaded');
+  }
+
+  /**
+   * Change the language of MM on General Settings page
+   *
+   * @param languageToSelect - The language to select
+   */
+  async changeLanguage(languageToSelect: string): Promise<void> {
+    console.log(
+      'Changing language to ',
+      languageToSelect,
+      'on general settings page',
+    );
+    await this.check_noLoadingOverlaySpinner();
+    await this.driver.clickElement(this.selectLanguageField);
+    await this.driver.clickElement({
+      text: languageToSelect,
+      tag: 'option',
+    });
+    await this.check_noLoadingOverlaySpinner();
+  }
+
+  async check_noLoadingOverlaySpinner(): Promise<void> {
+    await this.driver.assertElementNotPresent(this.loadingOverlaySpinner);
+  }
+}
+
+export default GeneralSettings;

test/e2e/tests/settings/change-language.spec.ts

@@ -1,21 +1,17 @@
 import { strict as assert } from 'assert';
 import { Suite } from 'mocha';
-
 import { Driver } from '../../webdriver/driver';
-import {
-  defaultGanacheOptions,
-  withFixtures,
-  unlockWallet,
-} from '../../helpers';
+import { withFixtures } from '../../helpers';
 import FixtureBuilder from '../../fixture-builder';
+import AdvancedSettings from '../../page-objects/pages/settings/advanced-settings';
+import GeneralSettings from '../../page-objects/pages/settings/general-settings';
+import HeaderNavbar from '../../page-objects/pages/header-navbar';
+import Homepage from '../../page-objects/pages/homepage';
+import SendTokenPage from '../../page-objects/pages/send/send-token-page';
+import SettingsPage from '../../page-objects/pages/settings/settings-page';
+import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow';
 
 const selectors = {
-  accountOptionsMenuButton: '[data-testid="account-options-menu-button"]',
-  settingsOption: { text: 'Settings', tag: 'div' },
-  localeSelect: '[data-testid="locale-select"]',
-  ethOverviewSend: '[data-testid="eth-overview-send"]',
-  ensInput: '[data-testid="ens-input"]',
-  nftsTab: '[data-testid="account-overview__nfts-tab"]',
   labelSpanish: { tag: 'p', text: 'Idioma actual' },
   currentLanguageLabel: { tag: 'p', text: 'Current language' },
   advanceText: { text: 'Avanceret', tag: 'div' },
@@ -29,50 +25,37 @@ const selectors = {
   headerText: { text: 'الإعدادات', tag: 'h3' },
 };
 
-async function changeLanguage(driver: Driver, languageIndex: number) {
-  await driver.clickElement(selectors.accountOptionsMenuButton);
-  await driver.clickElement(selectors.settingsOption);
-
-  const dropdownElement = await driver.findElement(selectors.localeSelect);
-  await dropdownElement.click();
-
-  const options = await dropdownElement.findElements({ css: 'option' });
-  await options[languageIndex].click();
-}
-
 describe('Settings - general tab @no-mmi', function (this: Suite) {
   it('validate the change language functionality', async function () {
-    let languageIndex = 10;
-
     await withFixtures(
       {
         fixtures: new FixtureBuilder().build(),
-        ganacheOptions: defaultGanacheOptions,
         title: this.test?.fullTitle(),
       },
-
       async ({ driver }: { driver: Driver }) => {
-        await unlockWallet(driver);
-        await changeLanguage(driver, languageIndex);
+        await loginWithBalanceValidation(driver);
+        await new HeaderNavbar(driver).openSettingsPage();
+        const generalSettings = new GeneralSettings(driver);
+        await generalSettings.check_pageIsLoaded();
 
-        // Validate the label changes to Spanish
+        // Change language to Spanish and validate that the word has changed correctly
+        await generalSettings.changeLanguage('Español');
         const isLanguageLabelChanged = await driver.isElementPresent(
           selectors.labelSpanish,
         );
         assert.equal(isLanguageLabelChanged, true, 'Language did not change');
 
+        // Refresh the page and validate that the language is still Spanish
         await driver.refresh();
-
-        // Change back to English and verify that the word is correctly changed back to English
-        languageIndex = 9;
-
-        const dropdownElement = await driver.findElement(
-          selectors.localeSelect,
+        await generalSettings.check_pageIsLoaded();
+        assert.equal(
+          await driver.isElementPresent(selectors.labelSpanish),
+          true,
+          'Language did not change after refresh',
         );
-        await dropdownElement.click();
-        const options = await dropdownElement.findElements({ css: 'option' });
-        await options[languageIndex].click();
 
+        // Change language back to English and validate that the word has changed correctly
+        await generalSettings.changeLanguage('English');
         const isLabelTextChanged = await driver.isElementPresent(
           selectors.currentLanguageLabel,
         );
@@ -82,21 +65,22 @@ describe('Settings - general tab @no-mmi', function (this: Suite) {
   });
 
   it('validate "Dansk" language on page navigation', async function () {
-    const languageIndex = 6;
     await withFixtures(
       {
         fixtures: new FixtureBuilder().build(),
-        ganacheOptions: defaultGanacheOptions,
         title: this.test?.fullTitle(),
       },
-
       async ({ driver }: { driver: Driver }) => {
-        await unlockWallet(driver);
-        await changeLanguage(driver, languageIndex);
-
-        await driver.assertElementNotPresent('.loading-overlay__spinner');
+        await loginWithBalanceValidation(driver);
+        await new HeaderNavbar(driver).openSettingsPage();
+        const generalSettings = new GeneralSettings(driver);
+        await generalSettings.check_pageIsLoaded();
 
+        // Select "Dansk" language
+        await generalSettings.changeLanguage('Dansk');
         await driver.clickElement(selectors.advanceText);
+        const advancedSettings = new AdvancedSettings(driver);
+        await advancedSettings.check_pageIsLoaded();
 
         // Confirm that the language change is reflected in search box water text
         const isWaterTextChanged = await driver.isElementPresent(
@@ -132,22 +116,30 @@ describe('Settings - general tab @no-mmi', function (this: Suite) {
   });
 
   it('validate "Deutsch" language on error messages', async function () {
-    const languageIndex = 7;
     await withFixtures(
       {
         fixtures: new FixtureBuilder().build(),
-        ganacheOptions: defaultGanacheOptions,
         title: this.test?.fullTitle(),
       },
-
       async ({ driver }: { driver: Driver }) => {
-        await unlockWallet(driver);
-        await changeLanguage(driver, languageIndex);
-        await driver.navigate();
-        await driver.clickElement(selectors.ethOverviewSend);
-        await driver.pasteIntoField(
-          selectors.ensInput,
-          // use wrong checksum address; other inputs don't show error until snaps name-lookup has happened
+        await loginWithBalanceValidation(driver);
+        await new HeaderNavbar(driver).openSettingsPage();
+        const generalSettings = new GeneralSettings(driver);
+        await generalSettings.check_pageIsLoaded();
+
+        // Select "Deutsch" language
+        await generalSettings.changeLanguage('Deutsch');
+        await new SettingsPage(driver).closeSettingsPage();
+
+        const homepage = new Homepage(driver);
+        await homepage.check_pageIsLoaded();
+        await homepage.check_expectedBalanceIsDisplayed();
+        await homepage.startSendFlow();
+
+        const sendToPage = new SendTokenPage(driver);
+        await sendToPage.check_pageIsLoaded();
+        // use wrong address for recipient to allow error message to show
+        await sendToPage.fillRecipient(
           '0xAAAA6BF26964aF9D7eEd9e03E53415D37aA96045',
         );
 
@@ -165,18 +157,23 @@ describe('Settings - general tab @no-mmi', function (this: Suite) {
   });
 
   it('validate "मानक हिन्दी" language on tooltips', async function () {
-    const languageIndex = 19;
     await withFixtures(
       {
         fixtures: new FixtureBuilder().build(),
-        ganacheOptions: defaultGanacheOptions,
         title: this.test?.fullTitle(),
       },
-
       async ({ driver }: { driver: Driver }) => {
-        await unlockWallet(driver);
-        await changeLanguage(driver, languageIndex);
-        await driver.navigate();
+        await loginWithBalanceValidation(driver);
+        await new HeaderNavbar(driver).openSettingsPage();
+        const generalSettings = new GeneralSettings(driver);
+        await generalSettings.check_pageIsLoaded();
+
+        // Select "मानक हिन्दी" language
+        await generalSettings.changeLanguage('मानक हिन्दी');
+        await new SettingsPage(driver).closeSettingsPage();
+        const homepage = new Homepage(driver);
+        await homepage.check_pageIsLoaded();
+        await homepage.check_expectedBalanceIsDisplayed();
 
         // Validate the account tooltip
         const isAccountTooltipChanged = await driver.isElementPresent(
@@ -202,20 +199,24 @@ describe('Settings - general tab @no-mmi', function (this: Suite) {
   });
 
   it('validate "Magyar" language change on hypertext', async function () {
-    const languageIndex = 23;
     await withFixtures(
       {
         fixtures: new FixtureBuilder().build(),
-        ganacheOptions: defaultGanacheOptions,
         title: this.test?.fullTitle(),
       },
-
       async ({ driver }: { driver: Driver }) => {
-        await unlockWallet(driver);
-        // selects "Magyar" language
-        await changeLanguage(driver, languageIndex);
-        await driver.navigate();
-        await driver.clickElement(selectors.nftsTab);
+        await loginWithBalanceValidation(driver);
+        await new HeaderNavbar(driver).openSettingsPage();
+        const generalSettings = new GeneralSettings(driver);
+        await generalSettings.check_pageIsLoaded();
+
+        // Select "Magyar" language
+        await generalSettings.changeLanguage('Magyar');
+        await new SettingsPage(driver).closeSettingsPage();
+        const homepage = new Homepage(driver);
+        await homepage.check_pageIsLoaded();
+        await homepage.check_expectedBalanceIsDisplayed();
+        await homepage.goToNftTab();
 
         // Validate the hypertext
         const isHyperTextChanged = await driver.isElementPresent(
@@ -231,18 +232,20 @@ describe('Settings - general tab @no-mmi', function (this: Suite) {
   });
 
   it('validate "العربية" language change on page indent', async function () {
-    const languageIndex = 1;
     await withFixtures(
       {
         fixtures: new FixtureBuilder().build(),
-        ganacheOptions: defaultGanacheOptions,
         title: this.test?.fullTitle(),
       },
       async ({ driver }: { driver: Driver }) => {
-        await unlockWallet(driver);
-        await changeLanguage(driver, languageIndex);
+        await loginWithBalanceValidation(driver);
+        await new HeaderNavbar(driver).openSettingsPage();
+        const generalSettings = new GeneralSettings(driver);
+        await generalSettings.check_pageIsLoaded();
+
+        // Select "العربية" language and validate that the header text has changed
+        await generalSettings.changeLanguage('العربية');
 
-        // Validate the header text
         const isHeaderTextChanged = await driver.isElementPresent(
           selectors.headerText,
         );