separate visual tests from main test, update snapshots and dependencies (#31131)

e2e-tests/playwright/specs/visual/channels/intro_channel.spec.ts

@@ -3,24 +3,31 @@
 
 import {expect, test} from '@mattermost/playwright-lib';
 
-test('Intro to channel as regular user', async ({pw, browserName, viewport}, testInfo) => {
-    // Create and sign in a new user
-    const {user} = await pw.initSetup();
+/**
+ * @objective Capture visual snapshot of the intro channel view for a regular user
+ */
+test(
+    'displays intro to channel view for regular user',
+    {tag: ['@visual', '@channel_page']},
+    async ({pw, browserName, viewport}, testInfo) => {
+        // # Create and sign in a new user
+        const {user} = await pw.initSetup();
 
-    // Log in a user in new browser context
-    const {page, channelsPage} = await pw.testBrowser.login(user);
+        // # Log in a user in new browser context
+        const {page, channelsPage} = await pw.testBrowser.login(user);
 
-    // Visit a default channel page
-    await channelsPage.goto();
-    await channelsPage.toBeVisible();
+        // # Visit a default channel page
+        await channelsPage.goto();
+        await channelsPage.toBeVisible();
 
-    // Wait for Playbooks icon to be loaded in App bar, except in iphone
-    await expect(channelsPage.appBar.playbooksIcon).toBeVisible();
+        // # Wait for Playbooks icon to be loaded in App bar
+        await expect(channelsPage.appBar.playbooksIcon).toBeVisible();
 
-    // Hide dynamic elements of Channels page
-    await pw.hideDynamicChannelsContent(page);
+        // # Hide dynamic elements of Channels page
+        await pw.hideDynamicChannelsContent(page);
 
-    // Match snapshot of channel intro page
-    const testArgs = {page: page, browserName, viewport};
-    await pw.matchSnapshot(testInfo, testArgs);
-});
+        // * Verify channel intro page appears as expected
+        const testArgs = {page: page, browserName, viewport};
+        await pw.matchSnapshot(testInfo, testArgs);
+    },
+);

e2e-tests/playwright/specs/visual/common/landing_page.spec.ts

@@ -3,11 +3,18 @@
 
 import {test} from '@mattermost/playwright-lib';
 
-test('/landing#/login', async ({pw, page, browserName, viewport}, testInfo) => {
-    // Go to landing login page
-    await pw.landingLoginPage.goto();
-    await pw.landingLoginPage.toBeVisible();
+/**
+ * @objective Capture visual snapshot of the landing page
+ */
+test(
+    'landing page visual check',
+    {tag: ['@visual', '@landing_page']},
+    async ({pw, page, browserName, viewport}, testInfo) => {
+        // # Go to landing login page
+        await pw.landingLoginPage.goto();
+        await pw.landingLoginPage.toBeVisible();
 
-    // Match snapshot of landing page
-    await pw.matchSnapshot(testInfo, {page, browserName, viewport});
-});
+        // * Verify landing page appears as expected
+        await pw.matchSnapshot(testInfo, {page, browserName, viewport});
+    },
+);

e2e-tests/playwright/specs/visual/common/login.spec.ts

@@ -3,29 +3,38 @@
 
 import {test} from '@mattermost/playwright-lib';
 
-test('/login', async ({pw, page, browserName, viewport}, testInfo) => {
-    // Set up the page not to redirect to the landing page
-    await pw.hasSeenLandingPage();
+/**
+ * @objective Capture visual snapshots of the login page in normal and error states
+ */
+test(
+    'login page visual check',
+    {tag: ['@visual', '@login_page']},
+    async ({pw, page, browserName, viewport}, testInfo) => {
+        // # Set up the page not to redirect to the landing page
+        await pw.hasSeenLandingPage();
 
-    // Go to login page
-    const {adminClient} = await pw.getAdminClient();
-    await pw.loginPage.goto();
-    await pw.loginPage.toBeVisible();
+        // # Go to login page
+        const {adminClient} = await pw.getAdminClient();
+        await pw.loginPage.goto();
+        await pw.loginPage.toBeVisible();
 
-    // Click to other element to remove focus from email input
-    await pw.loginPage.title.click();
+        // # Click to other element to remove focus from email input
+        await pw.loginPage.title.click();
 
-    // Match snapshot of login page
-    const testArgs = {page, browserName, viewport};
-    const license = await adminClient.getClientLicenseOld();
-    const editionSuffix = license.IsLicensed === 'true' ? '' : 'free edition';
-    await pw.matchSnapshot({...testInfo, title: `${testInfo.title} ${editionSuffix}`}, testArgs);
+        // # Get license information and prepare test args
+        const testArgs = {page, browserName, viewport};
+        const license = await adminClient.getClientLicenseOld();
+        const editionSuffix = license.IsLicensed === 'true' ? '' : 'free edition';
 
-    // Click sign in button without entering user credential
-    await pw.loginPage.signInButton.click();
-    await pw.loginPage.userErrorLabel.waitFor();
-    await pw.waitForAnimationEnd(pw.loginPage.bodyCard);
+        // * Verify login page appears as expected
+        await pw.matchSnapshot({...testInfo, title: `${testInfo.title} ${editionSuffix}`}, testArgs);
 
-    // Match snapshot of login page with error
-    await pw.matchSnapshot({...testInfo, title: `${testInfo.title} error ${editionSuffix}`}, testArgs);
-});
+        // # Click sign in button without entering user credential
+        await pw.loginPage.signInButton.click();
+        await pw.loginPage.userErrorLabel.waitFor();
+        await pw.waitForAnimationEnd(pw.loginPage.bodyCard);
+
+        // * Verify login page with error appears as expected
+        await pw.matchSnapshot({...testInfo, title: `${testInfo.title} error ${editionSuffix}`}, testArgs);
+    },
+);

e2e-tests/playwright/specs/visual/common/signup_email.spec.ts

@@ -4,11 +4,11 @@
 import {test} from '@mattermost/playwright-lib';
 
 /**
- * @objective Verify the appearance of the signup email page in normal and error states
+ * @objective Capture visual snapshots of the signup email page in normal and error states
  */
 test(
-    'signup_email visual verification',
-    {tag: '@visual_signup'},
+    'signup page visual check',
+    {tag: ['@visual', '@signup_email_page']},
     async ({pw, page, browserName, viewport}, testInfo) => {
         // # Set up the page not to redirect to the landing page
         await pw.hasSeenLandingPage();