Tornevall Networks

← Back to docs

Playwright-guide

Language: SV | EN | SV

Playwright Guide

Den här sidan är den fokuserade guiden för hur du faktiskt använder Playwright i Tools.

Om du vill ha den bredare översikten för hela funktionen finns fortfarande huvudguiden här:

När du ska använda vad

Det finns tre huvudsätt att använda Playwright i det här projektet:

1. Lagrade adminscript

Använd detta när du vill:

  • spara ett återanvändbart browserscript i Tools
  • återanvända samma login/session via en persistent profil
  • köra samma flöde manuellt eller schemalagt senare

Det här är rätt väg för t.ex.:

  • Facebook-flöden
  • återkommande kontrollflöden
  • browserautomation som ska köras från Tools admin eller schemaläggaren

2. Inspelning / manuell browseröppning

Använd detta när du vill:

  • logga in manuellt först
  • spela in steg/codegen innan scriptet är klart
  • förbereda en persistent profil som senare ska återanvändas av lagrade script

Det här görs normalt via browserbot.sh, utom för det dedikerade Socdemo-playbackspåret som nu använder play/socdemo-play.sh som direkt runner.

3. Projektets E2E-specar

Använd detta när du vill:

  • köra testsviten under tests/e2e
  • verifiera att Tools UI fortfarande fungerar
  • spara rapporter, video, screenshots och traces för testkörningar

Detta hör ihop med den dedikerade adminytan för Playwright E2E och den vanliga Playwright-teststrukturen i projektroten.

Snabbstart: vanligaste sättet

Om du bara vill komma igång snabbt:

  1. öppna /admin/browser-automation/create
  2. skapa ett script med en enkel key, t.ex. example-home
  3. välj chrome eller chromium
  4. sätt en start_url
  5. klistra in ett enkelt script
  6. klicka Run now
  7. kontrollera output och screenshot

Exempelscript:

await page.goto(input.url || 'https://example.com', { waitUntil: 'domcontentloaded' });
helpers.log('Loaded page', await page.title());
await helpers.screenshot('example-home.png');
return {
  title: await page.title(),
  url: page.url(),
};

Hur du använder Playwright från admin-UI:t

Adminytor:

  • /admin/browser-automation
  • /admin/browser-automation/playwright

Skapa ett lagrat script

På create/edit-sidan fyller du i:

  • Key – stabilt namn för scriptet, t.ex. facebook-post
  • Name – läsbart namn i admin
  • Browser – chrome, chromium eller edge
  • Start URL – första sidan du vill öppna
  • Profile directory – namn på persistent profil om du vill återanvända login/session
  • Timeout – maxkörtid
  • Input JSON – valfria parametrar som scriptet läser via input
  • Script source – själva Playwright-koden

När du ska använda profile_directory

Sätt en persistent profil när du vill:

  • hålla kvar inloggning mellan körningar
  • återanvända cookies/session
  • förbereda login manuellt en gång och därefter köra scriptet om och om igen

Lämnar du fältet tomt använder Tools normalt scriptets key som standardnamn för sparad profil.

När du ska använda headed mode

Använd headed mode när du:

  • loggar in första gången
  • väntar dig challenge/captcha/2FA
  • vill se exakt vad browsern gör

Headless passar bättre för stabila redan förberedda körningar.

Hur du använder browserbot.sh

Wrappern i projektroten är det snabbaste sättet att använda samma Playwright-upplägg från shell.

Lista lagrade script

bash browserbot.sh --list

Kör ett lagrat script

bash browserbot.sh --key facebook-post
bash browserbot.sh --name "Facebook post"

Kör med explicit profil

bash browserbot.sh --key facebook-post --profile facebook-admin

Kör i headed mode

bash browserbot.sh --key facebook-post --headed

Tvinga ren tillfällig profil

bash browserbot.sh --key facebook-post --fresh-profile

Det är rätt val när du inte vill återanvända sparad session.

Hur du spelar in steg först

Om du vill bygga upp ett flöde innan du sparar själva scriptet i databasen kan du spela in/codegena först.

Record-läge

bash browserbot.sh --record --key facebook-post --start-url https://www.facebook.com/

Detta är bra när du vill:

  • logga in manuellt
  • klicka igenom ett flöde
  • använda inspelningen som grund för det riktiga scriptet

Open-läge

bash browserbot.sh --open --browser chrome --profile facebook-admin --start-url https://www.facebook.com/

Detta öppnar browsern utan att köra playback och utan att tvinga codegenflöde.

Det är rätt läge när du bara vill:

  • logga in
  • kontrollera att en persistent profil verkligen fungerar
  • installera eller verifiera något manuellt i browsern

Hur du återanvänder en redan inloggad profil

Om du redan har en bra basprofil kan du klona den till en ny profil i stället för att göra hela loginflödet igen.

bash browserbot.sh --clone-profile --copy-profile-from default --profile facebook-page-bot
bash browserbot.sh --open --profile facebook-page-bot --start-url https://www.facebook.com/

Detta är användbart när:

  • default redan innehåller dyr setup som login, cookies eller extension-konfiguration
  • du vill skapa flera varianter för olika konton eller sidor
  • varje variant ändå behöver sin egen sista kontoväxling eller egen sessionsstate

Hur lagrade script får tillgång till Playwright-objekt

Ditt lagrade script körs i en async-funktion och får tillgång till:

  • page
  • context
  • browser
  • playwright
  • helpers
  • input

Vanliga helpers

  • helpers.log(...parts)
  • await helpers.screenshot('shot.png')
  • await helpers.saveText('note.txt', '...')
  • await helpers.saveJson('state.json', value)
  • helpers.setOutput(value)
  • await helpers.delay(ms)
  • helpers.getEnv('NAME')

Enkel mall

await page.goto(input.url || 'https://example.com', { waitUntil: 'domcontentloaded' });
helpers.log('Title', await page.title());
await helpers.screenshot('page.png');
helpers.setOutput({
  title: await page.title(),
  url: page.url(),
});
return { ok: true };

Hur du kör projektets E2E-specar

För projektets Playwright-tester används:

  • config: playwright.config.ts
  • specar: tests/e2e
  • profiler: storage/playwright/profiles/<name>
  • rapporter/artefakter: storage/playwright/

Viktig skillnad mot lagrade adminscript

  • lagrade adminscript är browserautomation för riktiga arbetsflöden
  • E2E-specar är testfall för projektets UI och funktioner

När du ska använda adminens Playwright E2E-sida

Öppna:

  • /admin/browser-automation/playwright

Där kan du:

  1. läsa en specfil
  2. köra hela testsviten
  3. köra en vald fil
  4. sätta base URL
  5. välja om webservern ska hoppas över
  6. välja persistent profil före körningen
  7. granska sparade rapporter och artefakter

Hur du kör persistent E2E/codegen lokalt

Alias i projektet:

npm run test:e2e:codegen

Persistent helper:

bash bin/playwright-record-persistent.sh

Mot extern miljö:

PLAYWRIGHT_SKIP_WEBSERVER=true PLAYWRIGHT_BASE_URL=https://tools.tornevall.net bash bin/playwright-record-persistent.sh

Första setup om Playwright ännu inte är installerat

För browser automation-runnern

cd automation/playwright
npm install

För Laravel-rotens / E2E-setup och den aktuella Browserbot/Socdemo-hoststacken

sudo bash bin/install-browserbot-stack.sh

Den installern är nu den kanoniska host-side-entrypointen för den här stacken. I sin nuvarande form installerar den Node via NodeSource, filtrerade Linux-beroenden för browsern, Xvfb, Playwright-paketet och en projektspecifik Playwright-Chromium-cache under storage/app/browser-automation/playwright-browsers.

Viktiga detaljer i den aktuella runtime-uppdelningen:

  • browserbot.sh är fortfarande den generella shell-wrappern för lagrade script, --open, --record, profilkloning och export/import av profilseeds.
  • play/socdemo-play.sh är nu den särskilda direktrunnern för SocialGPT:s Socdemo-playbackflöde.
  • Socdemo-runnern är avsiktligt Chromium-först, avvisar snap-typen av /usr/bin/chromium-browser, och använder bara Chrome när du uttryckligen begär det.
  • SOCDEMO_DISPLAY_MODE=headless är avsiktligt blockerat för just den extension-tunga Socdemo-playbackvägen; den stödda servermodellen är fortfarande en headed browser inne i Xvfb.

Om Node/npm/npx är trasigt eller saknas

sudo bash bin/install-browserbot-stack.sh

Praktiska rekommendationer

Bra arbetssätt

  • börja med ett mycket litet script
  • verifiera screenshot/output först
  • gå över till riktig målsite först när grundflödet fungerar
  • använd persistent profil för login-tunga sidor
  • använd headed mode under första login/session-setup
  • håll input enkel och läsbar

När något känns konstigt

Börja med att kontrollera:

  • öppnar scriptet rätt start_url
  • använder du rätt browser
  • använder du rätt profile_directory
  • råkar du köra --fresh-profile när du egentligen vill återanvända sessionen
  • behöver första körningen vara headed
  • finns artefakterna där du förväntar dig dem

Rekommenderat första riktiga flöde

Om du vill bygga något lite mer verkligt utan att börja för stort:

  1. öppna en sida med --open eller --record
  2. logga in manuellt i en persistent profil
  3. spara profilnamnet
  4. kör ett lagrat script mot samma profil
  5. låt scriptet bara verifiera titel, URL eller att ett känt element finns
  6. först därefter lägger du till klick, formulärsteg eller publiceringsflöden

Relaterade guider