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);
+    },
+);