test(e2e): add snapshot test to landing page

Author: shootermv

e2e/landing-page.spec.ts

@@ -3,6 +3,11 @@ import { test, expect } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
   await page.goto("/");
 });
+//do not use system suffix
+// eslint-disable-next-line no-empty-pattern
+test.beforeEach(async ({}, testInfo) => {
+  testInfo.snapshotSuffix = "";
+});
 
 test("should render the page correctly", async ({ page }) => {
   await expect(page).toHaveTitle(/Developer Quiz/);
@@ -12,4 +17,13 @@ test("should render the page correctly", async ({ page }) => {
   });
   await expect(startButton).toBeVisible();
   await expect(startButton).toHaveAttribute("href", "#/quizzes");
+  // snapshot test for first section
+  const learnSection = page
+    .locator("div")
+    .filter({
+      hasText:
+        "Learn to Code RPG QuizPractice with 1200+ QuestionsGet started (it's free)"
+    })
+    .nth(1);
+  await expect(learnSection).toHaveScreenshot();
 });

e2e/landing-page.spec.ts-snapshots/should-render-the-page-correctly-1-Mobile-Chrome.png

@@ -41,11 +41,12 @@ export default defineConfig({
       use: { ...devices["Desktop Safari"] }
     },
 
-    /* Test against mobile viewports. */
     {
       name: "Mobile Chrome",
       use: { ...devices["Pixel 5"] }
     }
+    /*/ Test against mobile viewports. */
+
     // {
     //   name: 'Mobile Safari',
     //   use: { ...devices['iPhone 12'] },