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/tests/functional/channels/account_settings/profile/popover_fields.spec.ts

@@ -4,7 +4,7 @@
 import {expect, test} from '@e2e-support/test_fixture';
 import {createRandomUser} from '@e2e-support/server';
 
-test('MM-T53377 Profile popover should show correct fields after at-mention autocomplete', async ({pw, pages}) => {
+test('MM-T53377 Profile popover should show correct fields after at-mention autocomplete', async ({pw}) => {
     // # Initialize with specific config and get admin client
     const {user, adminClient, team} = await pw.initSetup();
 
@@ -20,22 +20,21 @@ test('MM-T53377 Profile popover should show correct fields after at-mention auto
     await adminClient.addToTeam(team.id, testUser2.id);
 
     // # Log in as user in new browser context
-    const {page} = await pw.testBrowser.login(user);
+    const {channelsPage} = await pw.testBrowser.login(user);
 
     // # Visit default channel page
-    const channelPage = new pages.ChannelsPage(page);
-    await channelPage.goto();
-    await channelPage.toBeVisible();
+    await channelsPage.goto();
+    await channelsPage.toBeVisible();
 
     // # Send mentions quickly
-    await channelPage.centerView.postCreate.postMessage(`@${user.username} @${testUser2.username}`);
+    await channelsPage.centerView.postCreate.postMessage(`@${user.username} @${testUser2.username}`);
 
     // # Open profile popover for current user
-    const firstMention = channelPage.centerView.container.getByText(`@${user.username}`, {exact: true});
+    const firstMention = channelsPage.centerView.container.getByText(`@${user.username}`, {exact: true});
     await firstMention.click();
 
     // * Verify all fields are visible for current user
-    const popover = channelPage.userProfilePopover;
+    const popover = channelsPage.userProfilePopover;
     await expect(popover.container.getByText(`@${user.username}`)).toBeVisible();
     await expect(popover.container.getByText(`${user.first_name} ${user.last_name}`)).toBeVisible();
     await expect(popover.container.getByText(user.email)).toBeVisible();
@@ -44,7 +43,7 @@ test('MM-T53377 Profile popover should show correct fields after at-mention auto
     await popover.close();
 
     // # Open profile popover for other user
-    const secondMention = channelPage.centerView.container.getByText(`@${testUser2.username}`, {exact: true});
+    const secondMention = channelsPage.centerView.container.getByText(`@${testUser2.username}`, {exact: true});
     await secondMention.click();
 
     // * Verify only username is visible for other user
@@ -55,14 +54,14 @@ test('MM-T53377 Profile popover should show correct fields after at-mention auto
     await popover.close();
 
     // # Trigger autocomplete
-    await channelPage.centerView.postCreate.writeMessage(`@${user.username}`);
+    await channelsPage.centerView.postCreate.writeMessage(`@${user.username}`);
 
     // # Wait for autocomplete
-    const suggestionList = channelPage.centerView.postCreate.suggestionList;
+    const suggestionList = channelsPage.centerView.postCreate.suggestionList;
     await expect(suggestionList.getByText(`@${user.username}`)).toBeVisible();
 
     // # Clear textbox
-    await channelPage.centerView.postCreate.writeMessage('');
+    await channelsPage.centerView.postCreate.writeMessage('');
 
     // # Open profile popover for current user again
     await firstMention.click();