feat: e2e for gatsby starter

.gitignore

@@ -12,6 +12,8 @@ yarn-error.log
 .env.development
 .env.production
 
+playwright-report/
+
 .vercel
 
 .vscode/

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Contentstack
+Copyright (c) 2026 Contentstack
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

e2e/README.md

@@ -0,0 +1,43 @@
+# E2E Test Suite
+
+End-to-end tests for Contentstack Gatsby Starter App using [Playwright](https://playwright.dev/).
+
+## Setup
+
+```bash
+cd e2e
+npm install
+npx playwright install chromium
+```
+
+## Run Tests
+
+```bash
+# Start Gatsby app first (in another terminal)
+cd contentstack-gatsby-starter-app
+npm run develop
+
+# Run tests
+cd e2e
+npm test              # Headless
+npm run test:headed   # With browser
+npm run test:debug    # Debug mode
+```
+
+## Structure
+
+```
+e2e/
+├── pages/          # Page Object Models
+├── tests/          # Test specs
+├── fixtures/       # Playwright fixtures
+└── utils/          # Helpers
+```
+
+## Configuration
+
+Set `BASE_URL` in `.env.development`:
+
+```
+BASE_URL=http://localhost:8000
+```

e2e/env.development.sample

@@ -0,0 +1,2 @@
+// Base URL for the Gatsby app (development server)
+BASE_URL=http://localhost:8000

e2e/fixtures/index.ts

@@ -0,0 +1 @@
+export { test, expect, TestFixtures } from './test-fixtures';

e2e/fixtures/test-fixtures.ts

@@ -0,0 +1,30 @@
+import { test as base } from '@playwright/test';
+import { HomePage, AboutPage, BlogPage, BlogPostPage, ContactPage } from '../pages';
+
+export interface TestFixtures {
+  homePage: HomePage;
+  aboutPage: AboutPage;
+  blogPage: BlogPage;
+  blogPostPage: BlogPostPage;
+  contactPage: ContactPage;
+}
+
+export const test = base.extend<TestFixtures>({
+  homePage: async ({ page }, use) => {
+    await use(new HomePage(page));
+  },
+  aboutPage: async ({ page }, use) => {
+    await use(new AboutPage(page));
+  },
+  blogPage: async ({ page }, use) => {
+    await use(new BlogPage(page));
+  },
+  blogPostPage: async ({ page }, use) => {
+    await use(new BlogPostPage(page));
+  },
+  contactPage: async ({ page }, use) => {
+    await use(new ContactPage(page));
+  },
+});
+
+export { expect } from '@playwright/test';

e2e/package.json

@@ -0,0 +1,36 @@
+{
+    "name": "contentstack-gatsby-starter-app-e2e",
+    "version": "1.0.0",
+    "description": "E2E test suite for Contentstack Gatsby Starter App using Playwright",
+    "main": "playwright.config.ts",
+    "scripts": {
+        "test": "playwright test",
+        "test:headed": "playwright test --headed",
+        "test:headless": "playwright test",
+        "test:chromium": "playwright test --project=chromium",
+        "test:firefox": "playwright test --project=firefox",
+        "test:webkit": "playwright test --project=webkit",
+        "test:mobile": "playwright test --project=mobile-chrome --project=mobile-safari",
+        "test:debug": "playwright test --debug",
+        "test:ui": "playwright test --ui",
+        "test:report": "playwright show-report ../playwright-report",
+        "test:ci": "CI=true playwright test --project=chromium",
+        "install:browsers": "playwright install"
+    },
+    "keywords": [
+        "playwright",
+        "e2e",
+        "testing",
+        "contentstack",
+        "gatsby",
+        "typescript"
+    ],
+    "author": "Contentstack",
+    "license": "MIT",
+    "devDependencies": {
+        "@playwright/test": "^1.40.0",
+        "@types/node": "^20.10.0",
+        "dotenv": "^16.3.1",
+        "typescript": "^5.3.0"
+    }
+}

e2e/pages/AboutPage.ts

@@ -0,0 +1,43 @@
+import { Page } from '@playwright/test';
+import { BasePage } from './BasePage';
+
+interface AboutSelectors {
+  heroBanner: string;
+  heroTitle: string;
+  teamSection: string;
+  teamMembers: string;
+}
+
+export class AboutPage extends BasePage {
+  readonly aboutSelectors: AboutSelectors;
+
+  constructor(page: Page) {
+    super(page);
+    this.aboutSelectors = {
+      heroBanner: '.hero-banner',
+      heroTitle: '.hero-banner .hero-title',
+      teamSection: '.about-team-section',
+      teamMembers: '.team-content .team-details',
+    };
+  }
+
+  async goto(): Promise<void> {
+    await super.goto('/about-us');
+  }
+
+  async isHeroBannerVisible(): Promise<boolean> {
+    return await this.page.locator(this.aboutSelectors.heroBanner).isVisible();
+  }
+
+  async getHeroTitle(): Promise<string | null> {
+    return await this.page.locator(this.aboutSelectors.heroTitle).textContent();
+  }
+
+  async isTeamSectionVisible(): Promise<boolean> {
+    return await this.page.locator(this.aboutSelectors.teamSection).isVisible();
+  }
+
+  async getTeamMembersCount(): Promise<number> {
+    return await this.page.locator(this.aboutSelectors.teamMembers).count();
+  }
+}