Set up homePage fixture. Assert main navigation.

fixtures/base.ts

@@ -0,0 +1,20 @@
+import { test as base } from '@playwright/test';
+import { BasePage } from '../page/base';
+
+// Declare the types of your fixtures.
+type MyFixtures = {
+    /** Base home page fixture */
+    homePage: BasePage;
+  };
+
+// Extend base test by providing "homePage".
+// This new "test" can be used in multiple test files, and each of them will get the fixtures.
+export const test = base.extend<MyFixtures>({
+  homePage: async ({ page }, use) => {
+    const homePage = new BasePage(page);
+    await homePage.goto();
+    await use(homePage);
+  },
+});
+
+export { expect } from '@playwright/test';

page/base.ts

@@ -0,0 +1,32 @@
+import { type Locator, type Page } from '@playwright/test';
+
+export class BasePage {
+    /** The playwright page */
+    page: Page;
+    /** The navigation bar parent locator */
+    navBar: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.navBar = this.page.locator(".elementor-nav-menu--main")
+
+
+  }
+
+
+  async goto() {
+    await this.page.goto('/');
+  }
+
+  getNavigationLocators() {
+    return {
+      homeLink: this.navBar.getByRole('link', { name: 'Home' }),
+      eventsLink: this.navBar.getByRole('link', { name: 'Events' }),
+      shopsServicesLink: this.navBar.getByRole('link', { name: 'Shops/Services' }),
+      partsLink: this.navBar.getByRole('link', { name: 'Parts' }),
+      forumLink: this.navBar.getByRole('link', { name: 'Forum' }),
+      storeLink: this.navBar.getByRole('link', { name: 'Store' }),
+      loginButton: this.page.getByRole('link', { name: 'Login' }),
+    };
+  }
+}

playwright.config.ts

@@ -12,6 +12,8 @@ import { defineConfig, devices } from '@playwright/test';
  */
 export default defineConfig({
   testDir: './specs',
+  /** Timeout for a test */
+  timeout: 360000,
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -35,19 +37,13 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: { 
+        ...devices['Desktop Chrome'],
+        // Viewport used for all pages in the context.
+        viewport: { width: 1920, height: 1080 },
+       },
     },
 
-    // {
-    //   name: 'firefox',
-    //   use: { ...devices['Desktop Firefox'] },
-    // },
-
-    // {
-    //   name: 'webkit',
-    //   use: { ...devices['Desktop Safari'] },
-    // },
-
     /* Test against mobile viewports. */
     // {
     //   name: 'Mobile Chrome',
@@ -58,21 +54,5 @@ export default defineConfig({
     //   use: { ...devices['iPhone 12'] },
     // },
 
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
   ],
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
 });

specs/main-page.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '../fixtures/base';
+
+test('Page Loads', async ({ homePage }) => {
+  await expect(homePage.page, "Page title is correct").toHaveTitle(/R.A.C.E./);
+});
+
+test('The navigation bar links are present and correct', async ({ homePage }) => {
+  // Get the locators from the page object
+  const locators = homePage.getNavigationLocators();
+
+  // Define your expected hrefs
+  const expectedHrefs: Record<string, string | RegExp> = {
+    homeLink: 'https://yellow.race.social/',
+    eventsLink: /index\.php\/events\//,
+    shopsServicesLink: /index\.php\/shops-services\//,
+    partsLink: /index\.php\/parts\//,
+    forumLink: /index\.php\/community\//,
+    storeLink: /index\.php\/store\//,
+    loginButton: /index\.php\/login\//,
+  };
+
+  // Loop through the locators and assert each link/button
+  for (const [linkName, locator] of Object.entries(locators)) {
+    await expect(locator, `${locator} is visible`).toBeVisible();
+    await expect(locator, `${locator} URI is correct`).toHaveAttribute('href', expectedHrefs[linkName as keyof typeof expectedHrefs]);
+  }
+});