Playwright - porządek z adresami URL i konfiguracją

Wstęp

Powtarzalne page.goto('http://localhost:4100/login') i asercje typu „URL zawiera /” to prośba o fałszywy zielony wynik. W wpisie o Cypressie poszedłeś przez hooki i baseUrl; tutaj ten sam porządek w Playwright Test.

Poprzedni odcinek: Refaktoryzacja - akcje vs POM.

Hooki - test.beforeEach

W Mocha / Playwright masz te same cztery haki (before, after, beforeEach, afterEach). Typowy wzorzec: przed każdym testem wejście na /login:

import { test } from "@playwright/test"

test.describe("logowanie", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/login")
  })

  test("successful login", async ({ page, request }) => {
    // ...
  })
})

W UI Playwrighta (tryb --ui) kroki beforeEach są wyraźnie widoczne - podobnie jak blok BEFORE EACH w runnerze Cypressa.

baseURL

W playwright.config.ts:

import { defineConfig } from "@playwright/test"

export default defineConfig({
  use: {
    baseURL: process.env.BASE_URL ?? "http://localhost:4100",
  },
})

Wtedy page.goto("/login") rozwija się do pełnego adresu frontu - odpowiednik baseUrl w cypress.json.

Asercja URL - contain vs pełna zgodność

Sprawdzenie tylko fragmentu (/) pozwala przejść na złą podstronę, jeśli nadal zawiera ten znak. Bezpieczniej:

import { expect } from "@playwright/test"

const base = process.env.BASE_URL ?? "http://localhost:4100"

await expect(page).toHaveURL(`${base}/`)
await expect(page).toHaveURL(`${base}/login`)

Albo toHaveURL(new RegExp(...)), jeśli query string jest niestabilny.

Osobny URL API

Backend zostaje na innym hoście (http://localhost:5000). Trzymaj go w zmiennej środowiskowej i używaj w helperach HTTP:

// playwright.config.ts - opcjonalnie udostępnij testom
export default defineConfig({
  use: {
    baseURL: process.env.BASE_URL ?? "http://localhost:4100",
  },
  env: {
    API_URL: process.env.API_URL ?? "http://localhost:5000",
  },
})

W teście: const api = test.info().project.use.env?.API_URL - prościej jednak czytać process.env.API_URL w module współdzielonym z helperami, tak jak w poprzednim wpisie.

Ważne: przed POST /users usuń użytkownika DELETE - ten sam błąd logiczny co w Cypressie i cypress-4, jeśli create nie czyści stanu.

Na CI ustawiasz BASE_URL i API_URL w zmiennych pipeline (por. Azure + Cypress); w Playwright nie potrzebujesz pluginu - wartości wchodzą do process.env przed startem Node.

Podsumowanie

Kod referencyjny (gałąź z serii Cypress):

https://github.com/12masta/react-redux-realworld-example-app/tree/4-cypress

https://github.com/12masta/react-redux-realworld-example-app/pull/4/files

Następny odcinek: Selektory data-testid w Playwright.