Webbskärmdumpar låter enkelt – tills de inte är det. En Cloudflare-kontroll, en geoblockering eller en banner om ”misstänkt trafik” och ditt ”bevis” blir en tom bild, en felsida eller en skärmdump du inte kan använda.
Det drabbar compliance-team hårdast, men även produktteam som följer konkurrenters sidor och marknadsförare som arkiverar kampanjändringar märker av det. Med Bright Data-skärmdumpar kan du fånga skyddade sidor tillförlitligt och lägga PNG-filerna i Google Drive med konsekvent namngivning.
Nedan ser du exakt vad arbetsflödet automatiserar, vilka resultat du får och hur du anpassar det för revisioner, QA-kontroller eller löpande övervakning.
Så fungerar den här automationen
Hela n8n-arbetsflödet, från trigger till slutligt resultat:
n8n Workflow Template: Bright Data + Google Drive, pålitliga webbskärmdumpar
flowchart LR
subgraph sg0["When clicking ‘Test workflow’ Flow"]
direction LR
n0@{ icon: "mdi:play-circle", form: "rounded", label: "When clicking ‘Test workflow’", pos: "b", h: 48 }
n1@{ icon: "mdi:cog", form: "rounded", label: "Write a file to disk", pos: "b", h: 48 }
n2["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Capture a screenshot"]
n3@{ icon: "mdi:swap-vertical", form: "rounded", label: "Set URL, Filename and Bright..", pos: "b", h: 48 }
n2 --> n1
n0 --> n3
n3 --> n2
end
%% Styling
classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
classDef disabled stroke-dasharray: 5 5,opacity: 0.5
class n0 trigger
class n2 api
classDef customIcon fill:none,stroke:none
class n2 customIcon
Problemet: skärmdumps-”bevis” som inte håller
Om du tar skärmdumpar för revisioner, konkurrentbevakning eller UI-validering känner du redan till den stökiga verkligheten. Manuella skärmdumpar är inte bara långsamma. De är inkonsekventa. En person får med cookie-bannern, en annan inte. Någon glömmer tidsstämpeln. En annan sparar den som ”screenshot-final-final.png” och ingen hittar den senare. Och sedan stöter du på skyddade sajter (Cloudflare, skript för bot-detektering, geo-restriktioner) och dina vanliga verktyg fallerar – precis när du behöver ett korrekt underlag.
Friktionen byggs på. Och den märks på dussintals små sätt.
- Skyddade sidor kan visa en bot-kontrollskärm, vilket gör skärmdumpen värdelös för granskning.
- Manuell fångst och uppladdning till Drive tar cirka 10 minuter per URL när du räknar in namngivning och arkivering.
- Små inkonsekvenser (viewport, cookie-prompter, inloggat läge) skapar diskussioner under revisioner och godkännanden.
- När du skalar till dussintals URL:er blir ”snabbuppgiften” en återkommande veckosyssla som ingen äger.
Lösningen: Bright Data-skärmdumpning, automatiskt arkiverad i Drive
Det här n8n-arbetsflödet tar en webbskärmdump via Bright Data Web Unlocker, så att du tillförlitligt kan ladda sidor som normalt blockerar automation. Det börjar med att sätta tre grundsaker: mål-URL, filnamn och din Bright Data-zon. Sedan skickar n8n en skärmdumpsbegäran via HTTP till Bright Data, som returnerar en PNG. Därefter sparar arbetsflödet bilden så att du har en stabil fil att jobba med. Med en liten justering (som täcks nedan) kan du lagra PNG-filen i Google Drive med samma mappstruktur varje gång, så att granskningar och revisioner förblir smidiga.
Arbetsflödet startar när du triggar det i n8n och anger URL-detaljerna. Bright Data gör grovjobbet med att rendera sidan och ta skärmdumpen. Till sist sparar n8n PNG-filen och (valfritt) laddar upp den till Google Drive så att den är redo för ditt team.
Vad du får: automation vs. resultat
| Vad det här arbetsflödet automatiserar | Resultat du får |
|---|---|
|
|
Exempel: så här kan det se ut
Säg att du följer 20 skyddade URL:er varje vecka för compliance eller konkurrentbevakning. Manuellt kan du lägga cirka 10 minuter per URL mellan att ladda, försöka igen när du blir blockerad, namnge filen och ladda upp till Google Drive. Det är ungefär 3 timmar per vecka. Med det här arbetsflödet triggar du körningen (eller schemalägger den), Bright Data tar skärmdumpen och n8n sparar PNG-filen och arkiverar den. Din manuella tid sjunker till några minuter totalt.
Det här behöver du
- n8n-instans (testa n8n Cloud gratis)
- Alternativ för egen hosting om du föredrar det (Hostinger fungerar bra)
- Bright Data Web Unlocker för att ta skärmdumpar av skyddade webbplatser.
- Google Drive för att lagra PNG-filer i delade mappar.
- Bright Data Web Unlocker-token (hämta den från inställningarna för din Bright Data-zon).
Kunskapsnivå: Medel. Du klistrar in en API-token, ändrar några fält och verifierar en filuppladdningssökväg.
Vill du inte sätta upp detta själv? Prata med en automationsexpert (gratis 15-minuters konsultation).
Så fungerar det
En körning triggas i n8n. I grundarbetsflödet är det en manuell start, vilket är perfekt för test. När du är nöjd med resultatet kan du byta till schema eller webhook utan att ändra kärnlogiken.
Måldetaljerna tilldelas. Arbetsflödet sätter URL:en du vill fånga, filnamnet du vill se senare och namnet på Bright Data-zonen. Det här är ”kontrollpanel”-noden som du kommer att ändra oftast.
Bright Data tar skärmdumpen. n8n skickar en HTTP POST till Bright Data Web Unlocker, autentiserad med din token. Bright Data laddar sidan på ett sätt som är betydligt mer robust mot bot-försvar än enkla headless-upplägg.
PNG-filen sparas och kan laddas upp till Drive. Arbetsflödet sparar skärmdumpen som en fil (PNG). Därifrån gör ett Google Drive-uppladdningssteg att resultatet blir tillgängligt för hela teamet, inte bara för den som körde jobbet.
Du kan enkelt justera reglerna för filnamn för att inkludera datum eller URL-slugs beroende på behov. Se den fullständiga implementationsguiden nedan för anpassningsalternativ.
Steg-för-steg-guide för implementation
Steg 1: konfigurera den manuella triggern
Starta arbetsflödet manuellt för att validera ert flöde för skärmdumpsfångst innan ni schemalägger det eller bäddar in det någon annanstans.
- Lägg till eller bekräfta noden Manual Execution Start i början av arbetsflödet.
- Koppla Manual Execution Start till Assign Target Details enligt körflödet.
- Lämna standardinställningarna eftersom Manual Execution Start inte kräver några parametrar.
Steg 2: koppla Bright Data för skärmdumpsförfrågningar
Konfigurera HTTP-begäran som skickar skärmdumpsinstruktioner till Bright Data API.
- Välj noden Request Screenshot Capture.
- Ställ in URL till
https://api.brightdata.com/requestoch Method tillPOST. - Aktivera Send Body och Send Headers.
- Ställ in Authentication till
genericCredentialTypeoch Generic Auth Type tillhttpHeaderAuth. - Under Body Parameters konfigurerar ni: zone till
={{ $json.zone }}, url till={{ $json.url }}, format tillrawoch data_format tillscreenshot. - I Options ställer ni in Response Format till file och Output Property Name till
={{ $json.filename }}. - Autentiseringsuppgifter krävs: Anslut era httpHeaderAuth-uppgifter i Request Screenshot Capture.
httpHeaderAuth-headern saknas eller är ogiltig kommer Bright Data att returnera autentiseringsfel och ingen fil skapas.Steg 3: ställ in måldetaljer
Definiera webbplatsens URL, filnamn och Bright Data-zon som ska skickas in i begäran.
- Öppna noden Assign Target Details.
- Under Assignments ställer ni in url till
https://dev.to/. - Ställ in filename till
devto.png. - Ställ in zone till
web_unlocker1. - Säkerställ att Assign Target Details är kopplad till Request Screenshot Capture.
Steg 4: konfigurera utdata för fillagring
Spara den returnerade skärmdumpsfilen till det lokala filsystemet.
- Välj noden Save Image to Storage.
- Ställ in Operation till
write. - Ställ in File Name till
={{ "c:\\"+ $json.filename }}. - Ställ in Data Property Name till
={{ $json.filename }}. - Bekräfta att Request Screenshot Capture skickar utdata till Save Image to Storage.
c:\ innan ni kör arbetsflödet.Steg 5: testa och aktivera ert arbetsflöde
Kör ett manuellt test för att validera begäran och bekräfta att skärmdumpsfilen sparas korrekt.
- Klicka på Execute Workflow i editorn för att trigga Manual Execution Start.
- Verifiera att Request Screenshot Capture returnerar en fil i utdata med egenskapsnamnet som matchar
={{ $json.filename }}. - Kontrollera ert lokala filsystem efter
c:\devto.pngför att bekräfta att Save Image to Storage slutfördes korrekt. - Om filen saknas, kontrollera autentiseringsuppgifter och parametrar igen i Assign Target Details och Request Screenshot Capture.
- När allt är validerat växlar ni arbetsflödet till Active för produktionsanvändning.
Vanliga fallgropar
- Bright Data-inloggningar kan löpa ut eller kräva specifika behörigheter. Om något slutar fungera: kontrollera först din token för Web Unlocker-zonen och Header Auth-inloggningsuppgifterna i n8n.
- Om du sparar lokalt (eller väntar på en extern renderer) varierar processtiderna. Om en nedströmsnod misslyckas för att filen saknas, öka väntetiden lite eller bekräfta att skrivsökvägen är åtkomlig.
- Google Drive-uppladdningar kan i tysthet hamna på fel ställe om du återanvänder ett gammalt mapp-ID. Dubbelkolla mappvalet i Google Drive-noden och verifiera mappningen för filnamn.
Vanliga frågor
Cirka 30 minuter om din Bright Data-zon är klar.
Nej. Du klistrar in en API-token och redigerar sedan fälten för URL och filnamn i n8n.
Ja. n8n har ett gratis alternativ för egen hosting och en gratis provperiod i n8n Cloud. Cloud-planer börjar på 20 USD/månad för högre volym. Du behöver också räkna in Bright Data-kostnader baserat på din Web Unlocker-användning.
Två alternativ: n8n Cloud (hanterat, enklast att komma igång) eller egen hosting på en VPS. För egen hosting är Hostinger VPS prisvärt och hanterar n8n bra. Egen hosting ger dig obegränsat antal körningar, men kräver grundläggande serveradministration.
Ja, och det är en vanlig uppgradering. Byt ut den manuella triggern mot en Schedule-trigger och skapa dynamiska filnamn i noden ”Assign Target Details” (till exempel genom att lägga till datum). Många team lägger också till en indata-lista med URL:er i Google Sheets och loopar igenom dem, och laddar sedan upp varje PNG till en Drive-mapp som är namngiven efter revisionsperioden.
Oftast beror det på att värdet i Authorization-headern är fel eller har löpt ut. Skapa en ny Web Unlocker-token i Bright Data och uppdatera sedan Header Auth-uppgiften i n8n så att den använder ”Bearer …” exakt. Det kan också vara att zonnamnet inte stämmer i noden ”Assign Target Details”, eller att din Bright Data-plan inte tillåter zonen du valde.
Med n8n Cloud Starter begränsas du av antalet körningar per månad, så högvolymkörningar av skärmdumpar driver ofta team till en högre plan. Om du hostar själv finns ingen körningsgräns från n8n, men serverresurser och Bright Data-gränser spelar fortfarande roll. I praktiken kör de flesta upplägg bekvämt dussintals skärmdumpar per timme, och sedan finjusterar du retries och taktning om du går över det.
För skärmdumpar från skyddade sajter: ja, oftast. Du behöver egna HTTP-anrop, hantering av binärfiler och ibland förgreningslogik när en fångst misslyckas, vilket n8n hanterar snyggt. Zapier och Make kan göra delar av detta, men binära filflöden och avancerad felhantering blir ofta krångligt (och dyrt) i skala. Om du vill ha den enklaste vägen och kan acceptera begränsningar kan de verktygen fungera. Prata med en automationsexpert om du vill ha hjälp att välja.
När detta väl är igång blir skärmdumpar tråkiga igen – på bästa möjliga sätt. Din Drive hålls organiserad, din bevisning blir konsekvent och du slipper upprepa samma fångstarbete vecka efter vecka.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.