From 4482038a41cc3c6d6252305d2534aa99d98395e0 Mon Sep 17 00:00:00 2001 From: Bastien Date: Thu, 15 Aug 2024 09:54:27 +0200 Subject: [PATCH] Utilisation des fixtures Playwright --- playwright.config.ts | 1 - tests/fixtures/index.ts | 52 ++++++++++++++++ tests/fixtures/pages/_page.ts | 15 +++++ tests/fixtures/pages/about-page.ts | 8 +++ tests/fixtures/pages/blog-page.ts | 8 +++ tests/fixtures/pages/contact-page.ts | 8 +++ tests/fixtures/pages/definition-page.ts | 8 +++ tests/fixtures/pages/faq-page.ts | 8 +++ tests/fixtures/pages/home-page.ts | 36 +++++++++++ tests/fixtures/pages/map-page.ts | 8 +++ .../fixtures/pages/tools-and-services-page.ts | 8 +++ tests/fixtures/pages/use-cases-page.ts | 8 +++ tests/home-page.spec.ts | 60 +++++++++---------- tests/pages/home-page.ts | 38 ------------ tests/pages/page.ts | 9 --- 15 files changed, 194 insertions(+), 81 deletions(-) create mode 100644 tests/fixtures/index.ts create mode 100644 tests/fixtures/pages/_page.ts create mode 100644 tests/fixtures/pages/about-page.ts create mode 100644 tests/fixtures/pages/blog-page.ts create mode 100644 tests/fixtures/pages/contact-page.ts create mode 100644 tests/fixtures/pages/definition-page.ts create mode 100644 tests/fixtures/pages/faq-page.ts create mode 100644 tests/fixtures/pages/home-page.ts create mode 100644 tests/fixtures/pages/map-page.ts create mode 100644 tests/fixtures/pages/tools-and-services-page.ts create mode 100644 tests/fixtures/pages/use-cases-page.ts delete mode 100644 tests/pages/home-page.ts delete mode 100644 tests/pages/page.ts diff --git a/playwright.config.ts b/playwright.config.ts index 0e207ed..0bf5a62 100644 --- a/playwright.config.ts +++ b/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 */ diff --git a/tests/fixtures/index.ts b/tests/fixtures/index.ts new file mode 100644 index 0000000..ec4de60 --- /dev/null +++ b/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 = + (PageClass: new (page: Page) => T) => + async ( + { page }: PlaywrightTestArgs & PlaywrightTestOptions, + use: (page: T) => Promise, + ) => { + const instance = new PageClass(page); + await instance.goto(); + await use(instance); + }; + +export const test = base.extend({ + 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), +}); diff --git a/tests/fixtures/pages/_page.ts b/tests/fixtures/pages/_page.ts new file mode 100644 index 0000000..bbc5a86 --- /dev/null +++ b/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); + } +} diff --git a/tests/fixtures/pages/about-page.ts b/tests/fixtures/pages/about-page.ts new file mode 100644 index 0000000..3b4ecd3 --- /dev/null +++ b/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'); + } +} diff --git a/tests/fixtures/pages/blog-page.ts b/tests/fixtures/pages/blog-page.ts new file mode 100644 index 0000000..d44c0ab --- /dev/null +++ b/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'); + } +} diff --git a/tests/fixtures/pages/contact-page.ts b/tests/fixtures/pages/contact-page.ts new file mode 100644 index 0000000..612010c --- /dev/null +++ b/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'); + } +} diff --git a/tests/fixtures/pages/definition-page.ts b/tests/fixtures/pages/definition-page.ts new file mode 100644 index 0000000..5a7164c --- /dev/null +++ b/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'); + } +} diff --git a/tests/fixtures/pages/faq-page.ts b/tests/fixtures/pages/faq-page.ts new file mode 100644 index 0000000..2fcb514 --- /dev/null +++ b/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'); + } +} diff --git a/tests/fixtures/pages/home-page.ts b/tests/fixtures/pages/home-page.ts new file mode 100644 index 0000000..b95d38a --- /dev/null +++ b/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"]'); + } +} diff --git a/tests/fixtures/pages/map-page.ts b/tests/fixtures/pages/map-page.ts new file mode 100644 index 0000000..ae2c684 --- /dev/null +++ b/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'); + } +} diff --git a/tests/fixtures/pages/tools-and-services-page.ts b/tests/fixtures/pages/tools-and-services-page.ts new file mode 100644 index 0000000..889860a --- /dev/null +++ b/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'); + } +} diff --git a/tests/fixtures/pages/use-cases-page.ts b/tests/fixtures/pages/use-cases-page.ts new file mode 100644 index 0000000..6c7db3f --- /dev/null +++ b/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'); + } +} diff --git a/tests/home-page.spec.ts b/tests/home-page.spec.ts index 5566ee9..829f174 100644 --- a/tests/home-page.spec.ts +++ b/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'); diff --git a/tests/pages/home-page.ts b/tests/pages/home-page.ts deleted file mode 100644 index fb690ba..0000000 --- a/tests/pages/home-page.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { RNBPage } from '@/tests/pages/page'; -import { Locator, Page } from '@playwright/test'; - -export class HomePage extends RNBPage { - readonly boutonCarte: Locator; - readonly champRechercheCarte: Locator; - readonly boutonRechercheCarte: Locator; - readonly suggestionsRechercheCarte: Locator; - readonly titreBdd: Locator; - readonly titreOutils: Locator; - readonly titreCasUsage: Locator; - readonly boutonFaq: Locator; - readonly champInfolettre: Locator; - readonly boutonInfolettre: Locator; - - constructor(page: Page) { - super(page); - - this.boutonCarte = page.locator('a', { - hasText: 'Voir la carte des bâtiments', - }); - this.champRechercheCarte = page.getByPlaceholder(/un identifiant RNB/); - this.boutonRechercheCarte = page.locator( - '.fr-search-bar button[type="submit"]', - ); - this.suggestionsRechercheCarte = page.locator( - '[class*="addressAutocomplete_autocomplete_suggestions"]', - ); - this.titreBdd = page - .locator('h2') - .getByText('Enrichissez vos bases de données bâtimentaires'); - this.titreOutils = page.locator('h2').getByText('Outils et services'); - this.titreCasUsage = page.locator('h2').getByText("Cas d'usage"); - this.boutonFaq = page.getByText('Consulter la Foire aux Questions'); - this.champInfolettre = page.getByPlaceholder('Votre adresse email'); - this.boutonInfolettre = page.locator('[value="S\'inscrire"]'); - } -} diff --git a/tests/pages/page.ts b/tests/pages/page.ts deleted file mode 100644 index 6b59f5f..0000000 --- a/tests/pages/page.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { type Page } from '@playwright/test'; - -export abstract class RNBPage { - readonly page: Page; - - protected constructor(page: Page) { - this.page = page; - } -}