E2E/Playwright: Instantiate page in pw (#29765)

* instantiate page in pw

* update spec

* fix storage key and require user when logging in via API

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/playwright/support/test_fixture.ts

@@ -6,16 +6,16 @@ import {TestBrowser} from './browser_context';
 import {shouldHaveCallsEnabled, shouldHaveFeatureFlag, shouldRunInLinux, ensureLicense, skipIfNoLicense} from './flag';
 import {initSetup, getAdminClient} from './server';
 import {hideDynamicChannelsContent, waitForAnimationEnd, waitUntil} from './test_action';
-import {pages} from './ui/pages';
+import pages from './ui/pages';
 import {matchSnapshot} from './visual';
 import {stubNotification, waitForNotification} from './mock_browser_api';
+import {duration} from './util';
 
 export {expect} from '@playwright/test';
 
 type ExtendedFixtures = {
     axe: AxeBuilderExtended;
     pw: PlaywrightExtended;
-    pages: typeof pages;
 };
 
 type AxeBuilderOptions = {
@@ -29,15 +29,11 @@ export const test = base.extend<ExtendedFixtures>({
         const ab = new AxeBuilderExtended();
         await use(ab);
     },
-    pw: async ({browser}, use) => {
-        const pw = new PlaywrightExtended(browser);
+    pw: async ({browser, page, isMobile}, use) => {
+        const pw = new PlaywrightExtended(browser, page, isMobile);
         await use(pw);
         await pw.testBrowser.close();
     },
-    // eslint-disable-next-line no-empty-pattern
-    pages: async ({}, use) => {
-        await use(pages);
-    },
 });
 
 class PlaywrightExtended {
@@ -60,8 +56,11 @@ class PlaywrightExtended {
     readonly waitForAnimationEnd;
     readonly waitUntil;
 
-    // ./ui/pages
-    readonly pages;
+    // unauthenticated page
+    readonly loginPage;
+    readonly landingLoginPage;
+    readonly signupPage;
+    readonly resetPasswordPage;
 
     // ./visual
     readonly matchSnapshot;
@@ -70,7 +69,9 @@ class PlaywrightExtended {
     readonly stubNotification;
     readonly waitForNotification;
 
-    constructor(browser: Browser) {
+    readonly hasSeenLandingPage;
+
+    constructor(browser: Browser, page: Page, isMobile: boolean) {
         // ./browser_context
         this.testBrowser = new TestBrowser(browser);
 
@@ -90,8 +91,11 @@ class PlaywrightExtended {
         this.waitForAnimationEnd = waitForAnimationEnd;
         this.waitUntil = waitUntil;
 
-        // ./ui/pages
-        this.pages = pages;
+        // unauthenticated page
+        this.loginPage = new pages.LoginPage(page);
+        this.landingLoginPage = new pages.LandingLoginPage(page, isMobile);
+        this.signupPage = new pages.SignupPage(page);
+        this.resetPasswordPage = new pages.ResetPasswordPage(page);
 
         // ./visual
         this.matchSnapshot = matchSnapshot;
@@ -99,6 +103,12 @@ class PlaywrightExtended {
         // ./mock_browser_api
         this.stubNotification = stubNotification;
         this.waitForNotification = waitForNotification;
+
+        this.hasSeenLandingPage = async () => {
+            // Visit the base URL to be able to set the localStorage
+            await page.goto('/');
+            return await waitUntilLocalStorageIsSet(page, '__landingPageSeen__', 'true');
+        };
     }
 }
 
@@ -142,3 +152,20 @@ class AxeBuilderExtended {
         return JSON.stringify(fingerprints, null, 2);
     }
 }
+
+async function waitUntilLocalStorageIsSet(page: Page, key: string, value: string, timeout = duration.ten_sec) {
+    await waitUntil(
+        () =>
+            page.evaluate(
+                ({key, value}) => {
+                    if (localStorage.getItem(key) === value) {
+                        return true;
+                    }
+                    localStorage.setItem(key, value);
+                    return false;
+                },
+                {key, value},
+            ),
+        {timeout},
+    );
+}