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({ maxDiffPixels: 100 });
 });

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

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