Playwright

Configurazione

Il trigger Playwright è configurabile attraverso il type playwright e i seguenti argomenti:

Playwright path

Il campo playwrightPath specifica il percorso della cartella di Playwright a partire dalla working directory, che può essere la cartella in cui si esegue Mtracer o la cartella specificata attraverso il flag --dir. Se non specificato, il valore di default è playwright.

File path

Il campo filePath specifica il percorso del file contenente lo script Playwright a partire dalla cartella specificata nel campo playwrightPath. Questo campo è obbligatorio e deve essere specificato come stringa.

Projects

Il campo projects specifica la lista dei tipi di browser da utilizzare per l’esecuzione dello script Playwright. I browser supportati si possono trovare nella documentazione ufficiale di Playwright. Se non specificato, lo script Playwright verrà eseguito con i browser specificati nel file playwright.config.ts.

Trace URL pattern

Il campo traceUrlPattern specifica una stringa per filtrare gli endpoint in cui includere l’header traceparent. Se non specificato, il valore di default è **, il quale indica che l’header traceparent verrà incluso in tutte le richieste effettuate dallo script Playwright. Per ulteriori informazioni sulla sintassi di questa stringa e su come filtrare gli endpoint, si consiglia di consultare la documentazione ufficiale di Playwright.

Questo campo è importante per evitare di includere l’header traceparent in endpoint multipli, in quanto potrebbe non essere accettato da tutti i servizi.

Configurazione script Playwright

Affinché lo script Playwright possa essere utilizzato come trigger, è necessario includere il seguente frammento di codice in un file separato:

import { test } from '@playwright/test';

test.beforeEach(async ({ page }) => {
    const serverUrl = process.env.MTRACER_PLAYWRIGHT_SERVER_URL;

    if (!serverUrl) {
        return;
    }

    try {
        const response = await fetch(serverUrl);
        if (response.ok) {
            const data = await response.json();
            const traceparent = data.traceparent;
            const traceUrlPattern = data.traceUrlPattern || '**';
            console.log(`[Mtracer] Received traceparent: ${traceparent}, pattern: ${traceUrlPattern}`);

            await page.route(traceUrlPattern, async (route) => {
                const headers = {
                    ...route.request().headers(),
                    'traceparent': traceparent
                };
                await route.continue({ headers });
            });
        } else {
            console.error(`[Mtracer] Server responded with error: ${response.status}`);
        }
    } catch (error) {
        console.error(`[Mtracer] Failed to contact Mtracer server at ${serverUrl}:`, error);
    }
});

Questo frammento di codice permette a Mtracer di generare un traceparent e di fornirlo a ogni singolo script Playwright.

Infine, all’interno dello script Playwright utilizzato come trigger, è fondamentale importare il file appena creato tramite import '<path-to-script>';.

Esempio di configurazione completa

1. File di test Mtracer con trigger Playwright configurato:

trigger:
  type: "playwright"
  args:
    playwrightPath: "playwright"
    filePath: "tests/rolldice.spec.ts"
    projects:
      - "chromium"
      - "webkit"
    traceUrlPattern: "**/rolldice**"

2. All’interno del file config.ts nella cartella playwright/mtracer è presente il codice per inserire l’header traceparent in tutte le richieste effettuate dallo script Playwright secondo l’URL pattern. Lo snippet di codice in questione è riportato nella sezione Configurazione script Playwright.

3. File rolldice.spec.ts all’interno di playwright/tests contenente lo script Playwright che verrà eseguito come trigger:

import { test, expect } from '@playwright/test';
import '../mtracer/config';

test('roll the dice', async ({ page }) => {
    await page.goto('http://localhost:5173/');
    await expect(page.getByRole('textbox', { name: 'Player Name (Optional)' })).toBeVisible();
    await page.getByRole('textbox', { name: 'Player Name (Optional)' }).click();
    await page.getByRole('textbox', { name: 'Player Name (Optional)' }).fill('Mtracer');
    await expect(page.getByRole('button', { name: 'Roll the Dice' })).toBeVisible();
    await page.getByRole('button', { name: 'Roll the Dice' }).click();
    await expect(page.getByText('Mtracer rolled a')).toBeVisible({ timeout: 10000 });
});