Sesja i Playwright – ekspresowe wprowadzenie

Powrót do: Playwright Elements – Kluczowe koncepcje automatyzacji testów

Sesja i Playwright – ekspresowe wprowadzenie

Prezentacja

Sesja

Co to jest sesja w przeglądarce?

To informacje, które przeglądarka zapamiętuje podczas naszej interakcji ze stroną.
Może to być stan logowania, preferencje użytkownika czy różne ustawienia strony.

Mamy kilka sposobów przechowywania danych:

• Cookies – przechowują dane o logowaniu
• Session storage – przechowuje dane do zamknięcia strony
• Local storage – przechowuje długotrwale dane w przeglądarce

Jak działa sesja w przeglądarce?

Przeglądarka i serwer komunikują się, aby utrzymać informacje o sesji.

Proces sesji wygląda zazwyczaj tak:

1. Użytkownik odwiedza stronę internetową i loguje się na stronie.
2. Serwer przypisuje unikalne dane użytkownikowi – to może być token ID lub inne zaszyfrowane informacje.
3. Dane sesji są odsyłane do front-endu i są przechowywane w przeglądarce (np. w cookies, Local Storage, Session Storage) i/lub na serwerze.
4. Podczas kolejnych żądań przeglądarka dołącza identyfikator sesji, aby serwer mógł rozpoznać użytkownika.
5. Po zakończeniu sesji (np. po zamknięciu przeglądarki lub wygaśnięciu czasu sesji) dane mogą zostać usunięte.

Wykorzystanie sesji w Playwright

Przygotowanie sesji

Zapisanie sesji po teście z logowaniem:

import { test, expect } from "@playwright/test";
import path from "path";
import { SESSION_PATH } from "../playwright.config";


test.describe("Setup session", () => {
  test("authenticate", async ({ page }) => {
    // Arrange:
    const userName = "Moses.Armstrong@Feest.ca";
    const password = "test1";


    await page.goto("/login/");


    // Act:
    await page.locator('[name="username"]').fill(userName);
    await page.locator("#password").fill(password);
    await page.locator("#loginButton").click();


    // Assert:
    await expect(page.getByTestId("hello")).toBeVisible();
    await page.context().storageState({ path: SESSION_PATH });
  });
});

Sesja w pojedynczych testach

Wstrzyknięcie sesji do wybranych testów za pomocą test.use():

import { test, expect } from "@playwright/test";
import { SESSION_PATH } from "../playwright.config";

test.use({
    storageState: SESSION_PATH
});

test.describe("welcome page tests", () => {
  test("user account", async ({ page }) => {
    // Arrange:
    const helloHeaderLocator = page.getByTestId("hello");

    await page.goto("/welcome/");

    // Assert:
    await expect(helloHeaderLocator).toBeVisible();
    await expect(helloHeaderLocator).toHaveText("Hi Moses.Armstrong@Feest.ca!");
  });
});

Wstrzyknięcie sesji do projektu

Wstrzyknięcie sesji do wszystkich testów z danego projektu:

import { defineConfig, devices } from "@playwright/test";
import path from "path";


export const SESSION_PATH = path.join(__dirname, "./.auth/user.json");


export default defineConfig({
  testDir: "./tests",
  fullyParallel: true,
  workers: 1,
  reporter: "html",
  use: {
    baseURL: "http://localhost:3000",
    trace: "on",
  },


  projects: [
    {
      name: "setup",
      use: { ...devices["Desktop Chrome"] },
      testMatch: /.*\.setup\.ts/,
    },
    {
      name: "tests",
      use: {
        ...devices["Desktop Chrome"],
        storageState: SESSION_PATH,
      },
      dependencies: ["setup"],
    },
  ],
});

Zewnętrzne linki i zasoby

• Darmowe materiały o automatyzacji z Playwright
• Wykorzystanie sesji podczas projektowania profesjonalnego frameworka zajdziesz w lekcjach – Projekty zależne, sesja i aliasy (🔒Tylko dla członków Programu Automatyzacja z Playwright)
• What Are Sessions? How Do They Work?
• Oficjalna dokumentacja o wykorzystaniu danych sesji w testach – Basic: shared account in all tests
• Oficjalnym repozytorium naszej autorskiej aplikacji do nauki automatyzacji: GitHub / 🦎GAD
• Mini kurs, w którym opowiadamy szczegółowo o naszej aplikacji do testów: GAD – poznaj naszą autorską aplikację do nauki automatyzacji (🔒Tylko dla członków Programu Automatyzacja z Playwright)