Utilisation des fixtures Playwright

playwright.config.ts

@@ -10,7 +10,6 @@ import { defineConfig, devices } from '@playwright/test';
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
-console.log('process.env.CI', JSON.stringify(process.env.CI));
 export default defineConfig({
   testDir: './tests',
   /* Run tests in files in parallel */

tests/fixtures/index.ts

@@ -0,0 +1,52 @@
+import {
+  Page,
+  PlaywrightTestArgs,
+  PlaywrightTestOptions,
+  test as base,
+  TestFixture,
+} from '@playwright/test';
+import { HomePage } from '@/tests/fixtures/pages/home-page';
+import { AboutPage } from '@/tests/fixtures/pages/about-page';
+import { BlogPage } from '@/tests/fixtures/pages/blog-page';
+import { ContactPage } from '@/tests/fixtures/pages/contact-page';
+import { DefinitionPage } from '@/tests/fixtures/pages/definition-page';
+import { FaqPage } from '@/tests/fixtures/pages/faq-page';
+import { MapPage } from '@/tests/fixtures/pages/map-page';
+import { ToolsAndServicesPage } from '@/tests/fixtures/pages/tools-and-services-page';
+import { UseCasesPage } from '@/tests/fixtures/pages/use-cases-page';
+import { RNBPage } from '@/tests/fixtures/pages/_page';
+
+type PagesFixtures = {
+  aboutPage: AboutPage;
+  blogPage: BlogPage;
+  contactPage: ContactPage;
+  definitionPage: DefinitionPage;
+  faqPage: FaqPage;
+  homePage: HomePage;
+  mapPage: MapPage;
+  toolsAndServicesPage: ToolsAndServicesPage;
+  useCasesPage: UseCasesPage;
+};
+
+const createPageFixture =
+  <T extends RNBPage>(PageClass: new (page: Page) => T) =>
+  async (
+    { page }: PlaywrightTestArgs & PlaywrightTestOptions,
+    use: (page: T) => Promise<void>,
+  ) => {
+    const instance = new PageClass(page);
+    await instance.goto();
+    await use(instance);
+  };
+
+export const test = base.extend<PagesFixtures>({
+  aboutPage: createPageFixture(AboutPage),
+  blogPage: createPageFixture(BlogPage),
+  contactPage: createPageFixture(ContactPage),
+  definitionPage: createPageFixture(DefinitionPage),
+  faqPage: createPageFixture(FaqPage),
+  homePage: createPageFixture(HomePage),
+  mapPage: createPageFixture(MapPage),
+  toolsAndServicesPage: createPageFixture(ToolsAndServicesPage),
+  useCasesPage: createPageFixture(UseCasesPage),
+});

tests/fixtures/pages/_page.ts

@@ -0,0 +1,15 @@
+import { type Page } from '@playwright/test';
+
+export abstract class RNBPage {
+  readonly page: Page;
+  readonly path: string;
+
+  protected constructor(page: Page, path: string) {
+    this.page = page;
+    this.path = path;
+  }
+
+  async goto() {
+    await this.page.goto(this.path);
+  }
+}

tests/fixtures/pages/about-page.ts

@@ -0,0 +1,8 @@
+import { RNBPage } from '@/tests/fixtures/pages/_page';
+import { Page } from '@playwright/test';
+
+export class AboutPage extends RNBPage {
+  constructor(page: Page) {
+    super(page, '/a-propos');
+  }
+}

tests/fixtures/pages/blog-page.ts

@@ -0,0 +1,8 @@
+import { RNBPage } from '@/tests/fixtures/pages/_page';
+import { Page } from '@playwright/test';
+
+export class BlogPage extends RNBPage {
+  constructor(page: Page) {
+    super(page, '/blog');
+  }
+}

tests/fixtures/pages/contact-page.ts

@@ -0,0 +1,8 @@
+import { RNBPage } from '@/tests/fixtures/pages/_page';
+import { Page } from '@playwright/test';
+
+export class ContactPage extends RNBPage {
+  constructor(page: Page) {
+    super(page, '/contact');
+  }
+}

tests/fixtures/pages/definition-page.ts

@@ -0,0 +1,8 @@
+import { RNBPage } from '@/tests/fixtures/pages/_page';
+import { Page } from '@playwright/test';
+
+export class DefinitionPage extends RNBPage {
+  constructor(page: Page) {
+    super(page, '/definition');
+  }
+}

tests/fixtures/pages/faq-page.ts

@@ -0,0 +1,8 @@
+import { RNBPage } from '@/tests/fixtures/pages/_page';
+import { Page } from '@playwright/test';
+
+export class FaqPage extends RNBPage {
+  constructor(page: Page) {
+    super(page, '/faq');
+  }
+}

tests/fixtures/pages/home-page.ts

@@ -0,0 +1,36 @@
+import { RNBPage } from '@/tests/fixtures/pages/_page';
+import { Locator, Page } from '@playwright/test';
+
+export class HomePage extends RNBPage {
+  readonly mapButton: Locator;
+  readonly searchMapField: Locator;
+  readonly searchMapButton: Locator;
+  readonly searchMapSuggestions: Locator;
+  readonly dbsTitle: Locator;
+  readonly toolsTitle: Locator;
+  readonly useCasesTitle: Locator;
+  readonly faqButton: Locator;
+  readonly newsletterField: Locator;
+  readonly newsletterButton: Locator;
+
+  constructor(page: Page) {
+    super(page, '/');
+
+    this.mapButton = page.locator('a', {
+      hasText: 'Voir la carte des bâtiments',
+    });
+    this.searchMapField = page.getByPlaceholder(/un identifiant RNB/);
+    this.searchMapButton = page.locator('.fr-search-bar button[type="submit"]');
+    this.searchMapSuggestions = page.locator(
+      '[class*="addressAutocomplete_autocomplete_suggestions"]',
+    );
+    this.dbsTitle = page
+      .locator('h2')
+      .getByText('Enrichissez vos bases de données bâtimentaires');
+    this.toolsTitle = page.locator('h2').getByText('Outils et services');
+    this.useCasesTitle = page.locator('h2').getByText("Cas d'usage");
+    this.faqButton = page.getByText('Consulter la Foire aux Questions');
+    this.newsletterField = page.getByPlaceholder('Votre adresse email');
+    this.newsletterButton = page.locator('[value="S\'inscrire"]');
+  }
+}

tests/fixtures/pages/map-page.ts

@@ -0,0 +1,8 @@
+import { RNBPage } from '@/tests/fixtures/pages/_page';
+import { Page } from '@playwright/test';
+
+export class MapPage extends RNBPage {
+  constructor(page: Page) {
+    super(page, '/map');
+  }
+}

tests/fixtures/pages/tools-and-services-page.ts

@@ -0,0 +1,8 @@
+import { RNBPage } from '@/tests/fixtures/pages/_page';
+import { Page } from '@playwright/test';
+
+export class ToolsAndServicesPage extends RNBPage {
+  constructor(page: Page) {
+    super(page, '/outils-services');
+  }
+}

tests/fixtures/pages/use-cases-page.ts

@@ -0,0 +1,8 @@
+import { RNBPage } from '@/tests/fixtures/pages/_page';
+import { Page } from '@playwright/test';
+
+export class UseCasesPage extends RNBPage {
+  constructor(page: Page) {
+    super(page, '/cas');
+  }
+}

tests/home-page.spec.ts

@@ -1,43 +1,38 @@
-import { test, expect } from '@playwright/test';
-import { HomePage } from '@/tests/pages/home-page';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('/');
-});
+import { expect } from '@playwright/test';
+import { test } from '@/tests/fixtures';
 
 test.describe("Page d'accueil", () => {
-  test('doit contenir les éléments nécessaires', async ({ page }) => {
-    const home = new HomePage(page);
-    await expect(home.boutonCarte).toBeVisible();
-    await expect(home.boutonCarte).toHaveAttribute('href', /carte/);
-    await expect(home.titreBdd).toBeVisible();
-    await expect(home.titreOutils).toBeVisible();
-    await expect(home.titreCasUsage).toBeVisible();
-    await expect(home.boutonFaq).toBeVisible();
-    await expect(home.boutonFaq).toHaveAttribute('href', /faq/);
+  test('doit contenir les éléments nécessaires', async ({ homePage }) => {
+    await expect(homePage.mapButton).toBeVisible();
+    await expect(homePage.mapButton).toHaveAttribute('href', /carte/);
+    await expect(homePage.dbsTitle).toBeVisible();
+    await expect(homePage.toolsTitle).toBeVisible();
+    await expect(homePage.useCasesTitle).toBeVisible();
+    await expect(homePage.faqButton).toBeVisible();
+    await expect(homePage.faqButton).toHaveAttribute('href', /faq/);
   });
 
   test('doit contenir le champ de recherche rapide pour la carte qui fonctionne avec clavier', async ({
+    homePage,
     page,
   }) => {
-    const home = new HomePage(page);
-    await expect(home.champRechercheCarte).toBeVisible();
-    await home.champRechercheCarte.scrollIntoViewIfNeeded();
-    await home.champRechercheCarte.fill('73 Av. de Paris, 94160 Saint-Mandé');
-    await expect(home.suggestionsRechercheCarte).toBeVisible();
-    await home.champRechercheCarte.press('ArrowDown');
-    await home.champRechercheCarte.press('Enter');
+    await expect(homePage.searchMapField).toBeVisible();
+    await homePage.searchMapField.scrollIntoViewIfNeeded();
+    await homePage.searchMapField.fill('73 Av. de Paris, 94160 Saint-Mandé');
+    await expect(homePage.searchMapSuggestions).toBeVisible();
+    await homePage.searchMapField.press('ArrowDown');
+    await homePage.searchMapField.press('Enter');
     await page.waitForURL('**/carte*');
   });
 
   test('doit contenir le champ de recherche rapide pour la carte qui fonctionne avec la souris', async ({
+    homePage,
     page,
   }) => {
-    const home = new HomePage(page);
-    await expect(home.champRechercheCarte).toBeVisible();
-    await home.champRechercheCarte.scrollIntoViewIfNeeded();
-    await home.champRechercheCarte.fill('73 Av. de Paris, 94160 Saint-Mandé');
-    await home.suggestionsRechercheCarte
+    await expect(homePage.searchMapField).toBeVisible();
+    await homePage.searchMapField.scrollIntoViewIfNeeded();
+    await homePage.searchMapField.fill('73 Av. de Paris, 94160 Saint-Mandé');
+    await homePage.searchMapSuggestions
       .locator('[class*="suggestion"]')
       .first()
       .click();
@@ -46,7 +41,7 @@ test.describe("Page d'accueil", () => {
 
   test("doit contenir un formulaire d'inscription à l'infolettre fonctionnel", async ({
     page,
-    context,
+    homePage,
   }) => {
     const email = 'email123@beta.gouv.fr';
     await page.route(/sibforms\.com/, (route) =>
@@ -56,13 +51,12 @@ test.describe("Page d'accueil", () => {
       }),
     );
 
-    const home = new HomePage(page);
-    await expect(home.champInfolettre).toBeVisible();
-    await expect(home.boutonInfolettre).toBeVisible();
-    await home.champInfolettre.fill(email);
+    await expect(homePage.newsletterField).toBeVisible();
+    await expect(homePage.newsletterButton).toBeVisible();
+    await homePage.newsletterField.fill(email);
     const [request] = await Promise.all([
       page.waitForRequest(/sibforms\.com/),
-      home.boutonInfolettre.click(),
+      homePage.newsletterButton.click(),
     ]);
     expect(request.url()).toContain('sibforms.com');
     expect(request.method()).toBe('POST');