[{"data":1,"prerenderedAt":635},["ShallowReactive",2],{"blog-playwright-de":3},{"slug":4,"published":5,"minutes":6,"category":7,"tags":8,"keywords":13,"about":21,"sources":28,"cover":50,"og":51,"expertise":52,"locales":53,"lang":55,"title":57,"description":58,"coverAlt":59,"metaTitle":60,"takeaways":61,"faq":67,"toc":80,"blocks":105,"others":362},"playwright","2026-05-27",10,"web",[9,10,11,12],"End-to-end testing","Browser automation","MCP","Cross-browser",[4,14,15,16,17,18,19,20],"playwright vs selenium","playwright mcp","browser automation testing","playwright test runner","playwright for ai agents","playwright vs cypress","playwright cloud pricing",[22,25],{"name":23,"url":24},"Playwright","https:\u002F\u002Fplaywright.dev",{"name":26,"url":27},"Model Context Protocol","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FModel_Context_Protocol",[29,32,35,38,41,44,47],{"title":30,"url":31},"Playwright documentation: installation","https:\u002F\u002Fplaywright.dev\u002Fdocs\u002Fintro",{"title":33,"url":34},"Playwright MCP introduction","https:\u002F\u002Fplaywright.dev\u002Fmcp\u002Fintroduction",{"title":36,"url":37},"Playwright CLI introduction","https:\u002F\u002Fplaywright.dev\u002Fagent-cli\u002Fintroduction",{"title":39,"url":40},"Playwright Test agents","https:\u002F\u002Fplaywright.dev\u002Fdocs\u002Ftest-agents",{"title":42,"url":43},"npm package metadata for @playwright\u002Ftest","https:\u002F\u002Fregistry.npmjs.org\u002F@playwright\u002Ftest\u002Flatest",{"title":45,"url":46},"Microsoft Learn: Playwright Workspaces free trial","https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fazure\u002Fapp-testing\u002Fplaywright-workspaces\u002Fhow-to-try-playwright-workspaces-free",{"title":48,"url":49},"Azure App Testing pricing","https:\u002F\u002Fazure.microsoft.com\u002Fen-us\u002Fpricing\u002Fdetails\u002Fapp-testing\u002F","\u002Fimages\u002Fblog\u002Fplaywright\u002Fcover.webp","\u002Fimages\u002Fblog\u002Fplaywright\u002Fog.jpg","ai-engineer",[54,55,56],"en","de","hu","Playwright: eine Browser-API für Tests, Skripte und Agents","Playwright steuert Chromium, Firefox und WebKit über eine Apache-2.0-API: Test-Runner, agent-taugliche CLI und MCP-Server. Was es kostet und wo es hapert.","Eine Schiene mit drei hängenden Quadraten, jedes mit anderer kleiner Form, drei Pfeile zweigen links ab.","Playwright-Test: Tests, Skripte und Agents · Balázs Csorba",[62,63,64,65,66],"Playwright steht unter Apache-2.0 ohne bezahlte Edition; Geld kostet CI-Zeit und optional Microsoft Playwright Workspaces, das pro Testminute abrechnet, sekundengenau, nach einem 30-Tage-Test mit 100 Minuten.","Eine API deckt Chromium, Firefox und WebKit unter Windows, Linux und macOS ab, mit nativer Mobil-Emulation für Android Chrome und Mobile Safari.","Die Agent-Flächen kommen vom Projekt selbst: ein MCP-Server mit 70+ Werkzeugen auf Accessibility-Snapshots, eine token-sparende CLI mit persistentem Daemon sowie Planner-, Generator- und Healer-Testagents.","Accessibility-Snapshots sind die Designentscheidung, die für LLMs zählt: Elemente tragen Refs statt Pixel, die Interaktion bleibt deterministisch, und kein Vision-Modell ist nötig.","Der Runner, nicht die API, verursacht die Wartungskosten: Projekte, Sharding, Traces und Retries sind kostenlos, aber nicht wartungsfrei.",[68,71,74,77],{"q":69,"a":70},"Ist Playwright kostenlos?","Das Framework steht unter Apache-2.0 und hat keine bezahlte Edition. Kosten entstehen durch CI-Minuten und Arbeitszeit sowie optional durch Microsoft Playwright Workspaces in Azure App Testing, das pro Testminute abrechnet, sekundengenau, nach einem 30-Tage-Test mit 100 Minuten.",{"q":72,"a":73},"MCP-Server oder CLI für Agents?","Die Dokumentation stellt die CLI für Coding-Agents voran: Shell-Befehle mit knapper Ausgabe laden keine Tool-Schemas und Accessibility-Bäume in den Kontext. MCP passt zu explorativen Schleifen mit persistentem Zustand und strukturierten Parametern; MCP öffnet dabei einen sichtbaren Browser, die CLI startet im Hintergrund.",{"q":75,"a":76},"Womit unterscheidet sich Playwright von Selenium?","Playwright spricht eigene Protokolle und liefert eine API, einen Runner mit Auto-Waiting und Web-First-Assertions sowie versionsgebundene Browser-Binaries. Selenium nutzt W3C WebDriver — das zählt, wenn ein Vertrag oder ein Vendor-Grid es verlangt, kostet sonst aber mehr Klebstoff für dieselben Abläufe.",{"q":78,"a":79},"Kann Playwright Tests mit einem LLM erzeugen und reparieren?","Ja, offiziell: npx playwright init-agents installiert Planner-, Generator- und Healer-Definitionen, die einen Markdown-Testplan schreiben, ihn in Specs übersetzen und fehlgeschlagene Tests durch erneutes Abspielen und Prüfen der Seite patchen. Der Healer darf einen Test auch überspringen, den er für defekt hält — sinnvoll als Standard, schlecht, wenn es unbemerkt passiert.",[81,84,87,90,93,96,99,102],{"id":82,"title":83},"what-it-is","Was es ist",{"id":85,"title":86},"how-it-works","Wie es funktioniert",{"id":88,"title":89},"getting-started","Erste Schritte",{"id":91,"title":92},"ai-agents","Agents am Steuer",{"id":94,"title":95},"pricing","Preise",{"id":97,"title":98},"where-it-shingles","Wo es quietscht",{"id":100,"title":101},"verdict","Fazit",{"id":103,"title":104},"sources","Quellen",[106,110,118,121,124,142,143,146,152,155,156,171,173,176,190,191,194,196,214,217,220,230,231,234,244,247,248,251,307,310,311,314,326,330,331],{"type":107,"content":108},"paragraph",[109],"Playwright ist Microsofts Browser-Automatisierung und inzwischen drei Produkte in einem Repository: ein Test-Runner, eine Scripting-Bibliothek und eine Agent-Fläche aus MCP-Server und Kommandozeilenwerkzeug. Es steht unter Apache-2.0, es gibt keine bezahlte Edition, und es bleibt die komfortabelste API dieser Kategorie. Die Position dieses Tests: der Standard für neue End-to-End-Arbeit — und die Agent-Flächen sind der Grund, eine bestehende Suite noch einmal anzusehen.",{"type":107,"content":111},[112,113,117],"Es konkurriert mit Selenium, Cypress und Puppeteer und zunehmend mit handgeschriebenen Scraping- und QA-Skripten, weil dasselbe ",{"tag":114,"children":115},"code",[116],"page","-Objekt jetzt einen Test in der CI, einen nächtlichen Report und ein LLM bedient, das den Browser über Accessibility-Snapshots steuert. Im Kern braucht keines davon ein Modell: die Agent-Werkzeuge liegen obenauf und lassen sich ignorieren — deshalb setzen Teams es zuerst als Testwerkzeug ein und entdecken die Agent-Ebene später.",{"type":119,"level":120,"id":82,"text":83},"heading",2,{"type":107,"content":122},[123],"Das Projekt liefert Browser-Automatisierung für Chromium, Firefox und WebKit unter Windows, Linux und macOS, lokal oder in der CI, im Hintergrund oder sichtbar, mit nativer Mobil-Emulation für Android Chrome und Mobile Safari. Die aktuelle Linie ist 1.63, veröffentlicht im September 2026, und die Browser-Binaries sind an diese Version gebunden.",{"type":125,"ordered":126,"items":127},"list",false,[128,130,132,134,136,138,140],[129],"Apache-2.0 ohne bezahlte Edition; das npm-Paket setzt Node 20 oder neuer voraus.",[131],"Eine API in vier Sprachen: JavaScript und TypeScript, Python, Java und .NET.",[133],"Ein Test-Runner mit Auto-Waiting, Web-First-Assertions, Fixtures, parallelen Projekten, Sharding, Retries und HTML-Report.",[135],"Browser-Kontexte geben jedem Test ein frisches Profil, damit Anmeldezustand ein Fixture und kein globales Geteiltes ist.",[137],"Werkzeuge um den Lauf: Codegen, UI-Modus, Trace-Viewer, Netzwerk-Mocking, Clock-Steuerung und Aria-Snapshots.",[139],"Offizielle Container-Bilder je Release, wodurch die CI-Browser identisch zu den lokalen bleiben.",[141],"Drei Agent-Flächen: ein MCP-Server, eine CLI mit installierbaren Skills sowie Planner-, Generator- und Healer-Testagents.",{"type":119,"level":120,"id":85,"text":86},{"type":107,"content":144},[145],"Der Treiber spricht jeden Browser über eigenes Protokoll — gepatchte Chromium- und Firefox-Builds plus ein gepatchtes WebKit —, und genau dadurch kann eine API dieselben Fähigkeiten auf allen drei Engines bieten statt des kleinsten gemeinsamen Nenners. Lokatoren werden zum Zeitpunkt der Aktion aufgelöst, und jede Aktion wartet, bis das Element bedienbar ist; der übliche Fix für einen flüchtigen Test ist damit eine Assertion statt eines Sleeps.",{"type":147,"src":148,"alt":149,"wide":150,"caption":151},"image","\u002Fimages\u002Fblog\u002Fplaywright\u002Fdiagram-7.webp","Playwright-Testlauf Eine Spec-Datei geht an den Runner, der die Tests über Browser-Projekte verteilt. Ein Treiber spricht Chromium, Firefox und WebKit, jeder Test läuft in einem frischen Browser-Kontext, und der Report sammelt die Traces. Snapshots und die Agent-Flächen hängen unter demselben Treiber.",true,"Ein Treiber, drei Engines und dasselbe Page-Objekt für den Test in der CI, das nächtliche Skript und den Agenten.",{"type":107,"content":153},[154],"Über dem Treiber sitzt der Runner, wo der eigentliche Wert entsteht: eine Konfigurationsdatei deklariert die Projekte — Browser, Viewports, Zugangsdaten —, Tests werden auf Worker verteilt, Sharding teilt sie auf Maschinen auf, und jeder Fehler trägt einen Trace, Schritt für Schritt abspielbar. Dieser Trace macht auch eine assistierte Diagnose praktikabel, weil er strukturierte Daten sind statt ein Screenshot eines Stack-Traces.",{"type":119,"level":120,"id":88,"text":89},{"type":107,"content":157},[158,159,162,163,166,167,170],"Ein Scaffold, ein Install, ein Lauf: ",{"tag":114,"children":160},[161],"npm init playwright@latest"," schreibt Konfiguration und erste Spec, ",{"tag":114,"children":164},[165],"npx playwright install --with-deps"," holt die versionsgebundenen Browser-Binaries samt Systembibliotheken, und ",{"tag":114,"children":168},[169],"npx playwright test"," läuft im Hintergrund und parallel über alle drei Engines.",{"type":114,"code":172},"import { test, expect, devices } from '@playwright\u002Ftest';\n\ntest('order confirmation shows a number', async ({ page }) => {\n  await page.goto('\u002Fcheckout');\n  await page.getByLabel('Email').fill('qa@example.com');\n  await page.getByRole('button', { name: 'Place order' }).click();\n  await expect(page.getByRole('status')).toContainText(\u002FOrder WS-\\d+\u002F);\n});\n\ntest.describe('phone', () => {\n  test.use({ ...devices['iPhone 15'] });\n  test('checkout renders on a phone viewport', async ({ page }) => {\n    await page.goto('\u002Fcheckout');\n    await expect(page.getByRole('heading', { name: 'Checkout' })).toBeVisible();\n  });\n});",{"type":107,"content":174},[175],"Was altern lässt, ist nicht der Runner, sondern die Selektoren. Die Empfehlung des Projekts: Rollen- und Label-Lokatoren bevorzugen, Assertions web-first halten, damit sie bis zum Timeout neu prüfen statt einmal zu sampeln, und bei Fehler den Trace öffnen statt aus dem Stack zu raten.",{"type":177,"variant":178,"title":179,"body":180},"callout","tip","Versionsdisziplin",[181],[182,183,186,187,189],"Die Browser sind an die Release gebunden, ein Upgrade von ",{"tag":114,"children":184},[185],"@playwright\u002Ftest"," verlangt also ein erneutes ",{"tag":114,"children":188},[165],": ein für 1.62 gebautes Image findet die erwarteten Binaries nicht. Paket und Browser zusammen pinnen und die Agent-Definitionen nach jedem Upgrade neu erzeugen — die Dokumentation sagt ausdrücklich, dass das bei jeder Playwright-Änderung zu geschehen hat.",{"type":119,"level":120,"id":91,"text":92},{"type":107,"content":192},[193],"Das ist der Teil, der den Status des Werkzeugs verändert hat. Playwright ist inzwischen ein Standardweg, wie ein Sprachmodell einen Browser bedient, und das Projekt liefert drei Wege dorthin, alle aus erster Hand.",{"type":114,"code":195},"# MCP server: structured tool calls, accessibility snapshots with element refs\n{\n  \"mcpServers\": {\n    \"playwright\": { \"command\": \"npx\", \"args\": [\"@playwright\u002Fmcp@latest\"] }\n  }\n}\n\n# CLI: shell commands for a coding agent, headless by default\nnpm install -g @playwright\u002Fcli\nplaywright-cli open https:\u002F\u002Fexample.com\nplaywright-cli snapshot\nplaywright-cli click e5\n\n# Test agents: planner, generator and healer, installed into the repo\nnpx playwright init-agents --loop=vscode",{"type":125,"ordered":126,"items":197},[198,204,206,212],[199,200,203],"Der MCP-Server liefert Accessibility-Snapshots: jedes Element trägt ein Ref wie ",{"tag":114,"children":201},[202],"e5",", das Modell klickt eine Referenz statt Koordinaten zu raten, und kein Vision-Modell ist nötig. Die Dokumentation listet 70+ Werkzeuge, Netzwerk-Mocking, Storage, Tracing und Video hinter Capability-Flags.",[205],"Die CLI ist der token-sparende Weg: knappe Ausgabe, ein persistenter Daemon, damit Befehle keinen Browser-Start bezahlen, Skills bei Bedarf und Sessions, die Zustand zwischen Befehlen behalten.",[207,208,211],"Playwright-Testagents — Planner, Generator und Healer — schreiben einen Markdown-Testplan, übersetzen ihn in Specs und patchen fehlgeschlagene Tests durch erneutes Abspielen und Prüfen der Seite; ",{"tag":114,"children":209},[210],"npx playwright init-agents"," installiert die Definitionen für VS Code, Claude Code, Codex und OpenCode.",[213],"Die Dokumentation benennt den Tausch direkt: MCP passt zu spezialisierten agentic Loops und explorativer Automatisierung, die CLI zu Coding-Agents mit großen Codebasen, und die CLI startet im Hintergrund, während MCP einen sichtbaren Browser öffnet.",{"type":107,"content":215},[216],"Die Token-Ökonomie entscheidet häufiger als die Features. Ein MCP-Umschlag legt bei jedem Schritt Tool-Schemas und einen frischen Snapshot in den Kontext; ein CLI-Befehl liefert den Pfad zu einer YAML-Snapshot-Datei und eine Zeile Status. Für einen langlebigen Agent, der nur durch einen Ablauf klicken muss, ist das der Unterschied zwischen einer Sitzung, die in den Kontext passt, und einer, die es nicht tut.",{"type":107,"content":218},[219],"Screenshots gibt es weiterhin — ein Tool-Aufruf, und der Vision-Modus setzt die Maus auf Koordinaten —, sie kosten aber Tokens pro Pixel und bringen genau die Mehrdeutigkeit zurück, die das Snapshot-Design entfernt hat. Der Accessibility-Baum ist eine Zusammenfassung, auf die das Modell handeln kann; ein Screenshot ist Beleg, das es deuten muss.",{"type":177,"variant":221,"title":222,"body":223},"warn","Ein Werkzeug ist Remote-Code-Ausführung",[224],[225,226,229],"Der MCP-Server bietet ",{"tag":114,"children":227},[228],"browser_run_code_unsafe",", das beliebiges JavaScript im Playwright-Serverprozess ausführt; die Dokumentation nennt es RCE-Äquivalent und rät, es nur für vertrauenswürdige Clients freizuschalten. Ein im Hintergrund laufender Browser ohne Werkzeugaufruf wird nach einer Stunde geschlossen, ein sichtbarer nicht, und der Extension-Connector kann sich an einen Browser mit aktiven Anmeldungen hängen — zuerst den Client begrenzen, dann den Browser.",{"type":119,"level":120,"id":94,"text":95},{"type":107,"content":232},[233],"Das Framework kostet nichts, es gibt keine Pro-Edition, keine Sitzplätze und keine Nutzungsverrechnung. Kosten entstehen an drei Stellen: CI-Minuten, die die Suite verbrennt, die Arbeitszeit, die sie grün hält, und — nur wenn ein verwaltetes Grid gewünscht ist — Microsofts Cloud aus erster Hand.",{"type":125,"ordered":126,"items":235},[236,238,240,242],[237],"Framework: kostenlos unter Apache-2.0, unbegrenzte Projekte und Tests, keine zu verlängernde Lizenz.",[239],"Playwright Workspaces in Azure App Testing: nutzungsbasiert pro Testminute, sekundengenau abgerechnet, mit einem 30-Tage-Test inklusive 100 Minuten; darüber hinaus wechselt der Workspace in den bezahlten Tarif, und die veröffentlichten Sätze hängen von der Region ab.",[241],"Fremd-Grids wie BrowserStack und Sauce Labs rechnen pro paralleler Sitzung oder Abo ab und sind nur für echte Geräte, eine breitere Browser-Matrix oder Compliance nötig.",[243],"Die größte Position ist nie die Lizenz: das Aufräumen flüchtiger Tests und die Pflege von Selektoren sind die wiederkehrenden Kosten, und kein Plan deckt sie ab.",{"type":107,"content":245},[246],"Weil der Runner kostenlos ist, geht es bei der Migration meist um Zeit statt um Budget. Ein bestehender Suite-Stack bedeutet umgeschriebene Selektoren, Fixtures und Custom Commands, und die Amortisation kommt mit dem zweiten Wartungsmonat, nicht mit dem ersten grünen Build.",{"type":119,"level":120,"id":97,"text":98},{"type":107,"content":249},[250],"Die Schwächen sind bekannt und größtenteils akzeptiert. Browser-Binaries sind pro Release gebunden, ein Upgrade ist also eine geplante Aufgabe, die die CI-Images mitzieht. Die Breite des Runners ist viel Fläche, bevor ein Team etwas von Sharding und Traces hat. WebKit ist hier ein gepatchtes Build statt Safari selbst, ein Apple-spezifischer Defekt kann also spät auftauchen. Und die CLI- und MCP-Schichten sind neu genug, dass ihre Befehlssätze zwischen Minor-Releases wandern.",{"type":252,"head":253,"rows":261},"table",[254,256,257,259],[255],"",[23],[258],"Selenium",[260],"Cypress",[262,271,280,289,298],[263,265,267,269],[264],"Treiber",[266],"Eigenes Protokoll je Browser",[268],"W3C WebDriver",[270],"Proxy im Seitenkontext",[272,274,276,278],[273],"Browser",[275],"Chromium, Firefox, WebKit",[277],"Jeder WebDriver-Browser",[279],"Chrome, Firefox, Edge, Electron",[281,283,285,287],[282],"Runner",[284],"Integriert: parallel, Sharding, Traces",[286],"Selbst mitzubringen",[288],"Integriert, Sharding über Plugins",[290,292,294,296],[291],"Agent-Flächen",[293],"MCP, CLI und Testagents",[295],"Community-MCP-Server",[297],"Community-Plugins",[299,301,303,305],[300],"Passt zu",[302],"Neue Suites und agent-gesteuerte Arbeit",[304],"Alte Stacks und Vendor-Grids",[306],"Komponentenlastige Front-End-Teams",{"type":107,"content":308},[309],"Das ehrliche Vergleichsziel ist der Umfang, nicht die Qualität. Selenium bleibt die Antwort, wenn ein Vertrag WebDriver oder eine Device-Cloud verlangt; Cypress liegt bequem für Teams, die in seinen Component-Test-Runner investiert sind; Puppeteer ist eine Bibliothek, kein Framework, und die richtige Größe für ein Skript. Playwright behauptet, eines dieser vier Werkzeuge zu sein — und die Wartungskosten dieser Behauptung sind die Browser-Matrix, die nun in der CI läuft.",{"type":119,"level":120,"id":100,"text":101},{"type":107,"content":312},[313],"Playwright ist der stärkste Standard der Browser-Automatisierung, und die interessante Frage ist nicht mehr, ob man es einführt, sondern welche seiner drei Flächen man wem aussetzt.",{"type":125,"ordered":150,"items":315},[316,318,320,322,324],[317],"Für neue End-to-End-Arbeit einführen. Runner, Kontext-Isolation und Trace-Viewer zahlen sich ab dem zweiten Monat aus — genau dann, wenn ein dünneres Werkzeug teurer wird.",[319],"Einführen, wenn ein Agent den Browser führen muss. Refs und Rollen sind günstiger und deterministischer als Pixel, und das Projekt pflegt MCP und CLI selbst, statt sie der Community zu überlassen.",[321],"Den Upgrade-Rhythmus einplanen: eine Release-Linie, die alle paar Wochen neue Browser-Binaries zieht, bedeutet, dass Lockfile, Image und Browser zusammen bewegt werden oder gar nicht.",[323],"Selenium behalten, wo WebDriver oder eine Device-Cloud vertraglich ist, und eine grüne Cypress-Suite nicht umschreiben, nur weil die API woanders schöner ist.",[325],"Die Testagents nicht als Review behandeln. Der Healer darf einen Test überspringen, den er für defekt hält — sinnvoll als Standard, schlecht, wenn es unbemerkt passiert.",{"type":327,"content":328},"quote",[329],"Der Browser ist nicht mehr nur das, was getestet wird; er ist auch die Schnittstelle, die ein Agent bedient. Werkzeuge, die ihn als strukturierten Zustand zeigen — Rollen, Refs, Text — altern besser als solche, die ihn als Pixel zeigen.",{"type":119,"level":120,"id":103,"text":104},{"type":125,"ordered":150,"items":332},[333,338,342,346,350,354,358],[334],{"tag":335,"href":31,"children":336},"a",[337],"Playwright-Dokumentation: Installation",[339],{"tag":335,"href":34,"children":340},[341],"Playwright MCP: Einführung",[343],{"tag":335,"href":37,"children":344},[345],"Playwright CLI: Einführung",[347],{"tag":335,"href":40,"children":348},[349],"Playwright Test Agents",[351],{"tag":335,"href":43,"children":352},[353],"npm-Paketmetadaten für @playwright\u002Ftest",[355],{"tag":335,"href":46,"children":356},[357],"Microsoft Learn: Testversion von Playwright Workspaces",[359],{"tag":335,"href":49,"children":360},[361],"Azure App Testing: Preise",[363,437,493,567],{"slug":364,"published":365,"minutes":6,"category":7,"tags":366,"keywords":372,"about":384,"sources":393,"cover":430,"og":431,"expertise":432,"locales":433,"lang":55,"title":434,"description":435,"coverAlt":436},"schema-org-structured-data-b2b-shop","2026-10-17",[367,368,369,370,371],"Schema.org","Structured data","B2B e-commerce","Technical SEO","Nuxt",[373,374,375,376,377,378,379,380,381,382,383],"schema.org b2b shop","product structured data b2b","merchant listing structured data","product snippet vs merchant listing","unitpricespecification referencequantity","productgroup variants structured data","organization schema vatid","b2b prices behind login seo","json-ld nuxt schema org","merchant return policy structured data","mpn gtin structured data",[385,387,390],{"name":367,"url":386},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSchema.org",{"name":388,"url":389},"JSON-LD","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FJSON-LD",{"name":391,"url":392},"Business-to-business","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FBusiness-to-business",[394,397,400,403,406,409,412,415,418,421,424,427],{"title":395,"url":396},"Google Search Central: Introduction to Product structured data","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Fproduct",{"title":398,"url":399},"Google Search Central: Merchant listing (Product, Offer) structured data","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Fmerchant-listing",{"title":401,"url":402},"Google Search Central: Product snippet structured data","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Fproduct-snippet",{"title":404,"url":405},"Google Search Central: Product variant structured data","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Fproduct-variants",{"title":407,"url":408},"Google Search Central: Organization structured data","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Forganization",{"title":410,"url":411},"Google Search Central: Merchant return policy structured data","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Freturn-policy",{"title":413,"url":414},"Google Search Central: General structured data guidelines","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Fsd-policies",{"title":416,"url":417},"Google Search Central: Generate structured data with JavaScript","https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Fgenerate-structured-data-with-javascript",{"title":419,"url":420},"Schema.org: Offer","https:\u002F\u002Fschema.org\u002FOffer",{"title":422,"url":423},"Schema.org: UnitPriceSpecification","https:\u002F\u002Fschema.org\u002FUnitPriceSpecification",{"title":425,"url":426},"Unhead: Product schema (defineProduct)","https:\u002F\u002Funhead.unjs.io\u002Fdocs\u002Fschema-org\u002Fapi\u002Fschema\u002Fproduct",{"title":428,"url":429},"Nuxt SEO: Schema.org identity setup","https:\u002F\u002Fnuxtseo.com\u002Fdocs\u002Fschema-org\u002Fguides\u002Fsetup-identity","\u002Fimages\u002Fblog\u002Fschema-org-structured-data-b2b-shop\u002Fcover.webp","\u002Fimages\u002Fblog\u002Fschema-org-structured-data-b2b-shop\u002Fog.jpg","b2b-ecommerce-developer",[54,55,56],"Schema.org-Strukturdaten für B2B-Shops: Preise hinter Logins, Einheiten und Varianten","Produkt-Markup für B2B-Shops: Snippet oder Händlereintrag, welcher Preis, Artikelnummern, Grundpreise, Varianten, Organization und SSR in Nuxt.","Ein Produktrechteck mit dünnem Rahmen und einem kleinen Feld, das eine niedrige Wand verdeckt.",{"slug":438,"published":365,"minutes":439,"category":7,"tags":440,"keywords":445,"about":457,"sources":465,"cover":487,"og":488,"expertise":432,"locales":489,"lang":55,"title":490,"description":491,"coverAlt":492},"ai-assistant-b2b-shop-customer-support",9,[369,441,442,443,444],"AI assistant","Customer support","LLM agents","EU AI Act",[446,447,448,449,450,451,452,453,454,455,456],"ai assistant b2b shop","ai customer support b2b ecommerce","llm chatbot order status","ai agent customer service tools","chatbot liability air canada","klarna ai assistant results","human handoff chatbot design","eu ai act chatbot disclosure","owasp excessive agency","ai support resolution rate","b2b customer portal chatbot",[458,461,464],{"name":459,"url":460},"Customer service","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FCustomer_service",{"name":462,"url":463},"Chatbot","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FChatbot",{"name":391,"url":392},[466,469,472,475,478,481,484],{"title":467,"url":468},"Klarna: AI assistant handles two-thirds of customer service chats in its first month (press release, 2024)","https:\u002F\u002Fwww.klarna.com\u002Finternational\u002Fpress\u002Fklarna-ai-assistant-handles-two-thirds-of-customer-service-chats-in-its-first-month\u002F",{"title":470,"url":471},"Entrepreneur: Klarna is hiring customer service agents again, according to its CEO (May 2025)","https:\u002F\u002Fwww.entrepreneur.com\u002Fbusiness-news\u002Fklarna-ceo-reverses-course-by-hiring-more-humans-not-ai\u002F491396",{"title":473,"url":474},"ABA Business Law Today: BC tribunal confirms companies remain liable for information provided by AI chatbot","https:\u002F\u002Fwww.americanbar.org\u002Fgroups\u002Fbusiness_law\u002Fresources\u002Fbusiness-law-today\u002F2024-february\u002Fbc-tribunal-confirms-companies-remain-liable-information-provided-ai-chatbot\u002F",{"title":476,"url":477},"OWASP GenAI Security Project: LLM06:2025 Excessive Agency","https:\u002F\u002Fgenai.owasp.org\u002Fllmrisk\u002Fllm062025-excessive-agency\u002F",{"title":479,"url":480},"OWASP GenAI Security Project: LLM05:2025 Improper Output Handling","https:\u002F\u002Fgenai.owasp.org\u002Fllmrisk\u002Fllm052025-improper-output-handling\u002F",{"title":482,"url":483},"EU AI Act, Article 50: Transparency obligations","https:\u002F\u002Fartificialintelligenceact.eu\u002Farticle\u002F50\u002F",{"title":485,"url":486},"Intercom: Fin pricing and billable outcomes","https:\u002F\u002Ffin.ai\u002Fpricing","\u002Fimages\u002Fblog\u002Fai-assistant-b2b-shop-customer-support\u002Fcover.webp","\u002Fimages\u002Fblog\u002Fai-assistant-b2b-shop-customer-support\u002Fog.jpg",[54,55,56],"Ein KI-Assistent für den Support im B2B-Shop: Tools, Berechtigungen und die Übergabe an Menschen","Wie man einen KI-Support-Assistenten für einen B2B-Shop baut: was automatisieren, Tools im Kundenkontext, Übergabe an Menschen, AI Act und Kennzahlen.","Eine hohe Mauer mit schmalem Durchgang: Ein Pfeil führt in ein Feld mit drei Quadraten, ein zweiter nach unten zu einer Ablage.",{"slug":494,"published":365,"minutes":495,"category":7,"tags":496,"keywords":501,"about":513,"sources":523,"cover":560,"og":561,"expertise":562,"locales":563,"lang":55,"title":564,"description":565,"coverAlt":566},"vue-ai-chat-ui-streaming-accessibility",11,[497,371,498,499,500],"Vue","Accessibility","Streaming","AI chat",[502,503,504,505,506,507,508,509,510,511,512],"vue ai chat ui","nuxt llm streaming","sse vs fetch streaming","aria-live streaming text","accessible chat interface","abort fetch stream vue","dompurify markdown llm","role log chat","reduced motion chat ui","wcag 2.2 chat","screen reader streaming",[514,517,520],{"name":515,"url":516},"Web accessibility","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FWeb_accessibility",{"name":518,"url":519},"Server-sent events","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FServer-sent_events",{"name":521,"url":522},"Vue.js","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FVue.js",[524,527,530,533,536,539,542,545,548,551,554,557],{"title":525,"url":526},"MDN: Using server-sent events","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FServer-sent_events\u002FUsing_server-sent_events",{"title":528,"url":529},"MDN: AbortController","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FAbortController",{"title":531,"url":532},"MDN: ReadableStream","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FReadableStream",{"title":534,"url":535},"MDN: TextDecoderStream","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FTextDecoderStream",{"title":537,"url":538},"MDN: ARIA log role","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAccessibility\u002FARIA\u002FReference\u002FRoles\u002Flog_role",{"title":540,"url":541},"W3C: Understanding SC 4.1.3 Status Messages","https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Fstatus-messages.html",{"title":543,"url":544},"W3C WAI: What's new in WCAG 2.2","https:\u002F\u002Fwww.w3.org\u002FWAI\u002Fstandards-guidelines\u002Fwcag\u002Fnew-in-22\u002F",{"title":546,"url":547},"MDN: prefers-reduced-motion","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F@media\u002Fprefers-reduced-motion",{"title":549,"url":550},"DOMPurify README","https:\u002F\u002Fgithub.com\u002Fcure53\u002FDOMPurify",{"title":552,"url":553},"markdown-it README","https:\u002F\u002Fgithub.com\u002Fmarkdown-it\u002Fmarkdown-it",{"title":555,"url":556},"AI SDK docs: useChat","https:\u002F\u002Fai-sdk.dev\u002Fdocs\u002Fai-sdk-ui\u002Fchatbot",{"title":558,"url":559},"Vue docs: nextTick","https:\u002F\u002Fvuejs.org\u002Fapi\u002Fgeneral.html#nexttick","\u002Fimages\u002Fblog\u002Fvue-ai-chat-ui-streaming-accessibility\u002Fcover.webp","\u002Fimages\u002Fblog\u002Fvue-ai-chat-ui-streaming-accessibility\u002Fog.jpg","vue-nuxt-developer",[54,55,56],"Streaming-Chat mit KI in Vue und Nuxt: von Anfang an barrierefrei","KI-Chat in Vue oder Nuxt: Fetch-Streams, Abbruch und Retry, sicheres Markdown-Rendering, aria-live-Meldungen, Tastaturnavigation und Reduced Motion.","Eine Nachrichtenkarte mit blinkendem Cursor, eine gepunktete Linie öffnet sich zu Wellen, daneben ein Haken.",{"slug":568,"published":365,"minutes":439,"category":7,"tags":569,"keywords":574,"about":586,"sources":596,"cover":629,"og":630,"expertise":562,"locales":631,"lang":55,"title":632,"description":633,"coverAlt":634},"llm-translation-pipeline-i18n",[570,571,572,497,573],"Translation","i18n","LLM","Localization",[575,576,577,578,579,580,581,582,583,584,585],"llm translation pipeline","icu messageformat placeholders","vue i18n llm translation","translation memory llm","glossary enforcement translation","german informal sie du","hungarian translation quality llm","structured output json translation","machine translation post-editing","locale file validation","cldr plural categories",[587,590,593],{"name":588,"url":589},"Internationalization and localization","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FInternationalization_and_localization",{"name":591,"url":592},"ICU MessageFormat","https:\u002F\u002Funicode-org.github.io\u002Ficu\u002Fuserguide\u002Fformat_parse\u002Fmessages\u002F",{"name":594,"url":595},"Vue I18n","https:\u002F\u002Fvue-i18n.intlify.dev\u002F",[597,599,602,605,608,611,614,617,620,623,626],{"title":598,"url":592},"Unicode ICU User Guide: Formatting Messages",{"title":600,"url":601},"Vue I18n: Message Format Syntax","https:\u002F\u002Fvue-i18n.intlify.dev\u002Fguide\u002Fessentials\u002Fsyntax",{"title":603,"url":604},"Nuxt i18n: Getting started","https:\u002F\u002Fi18n.nuxtjs.org\u002Fdocs\u002Fgetting-started",{"title":606,"url":607},"Unicode CLDR: Plural rules","https:\u002F\u002Fcldr.unicode.org\u002Findex\u002Fcldr-spec\u002Fplural-rules",{"title":609,"url":610},"OpenAI: Structured outputs","https:\u002F\u002Fplatform.openai.com\u002Fdocs\u002Fguides\u002Fstructured-outputs",{"title":612,"url":613},"DeepL API: Glossaries","https:\u002F\u002Fdevelopers.deepl.com\u002Fdocs\u002Fapi-reference\u002Fglossaries",{"title":615,"url":616},"W3C: Localization vs. internationalization","https:\u002F\u002Fwww.w3.org\u002FInternational\u002Fquestions\u002Fqa-i18n",{"title":618,"url":619},"GNU gettext manual","https:\u002F\u002Fwww.gnu.org\u002Fsoftware\u002Fgettext\u002Fmanual\u002Fgettext.html",{"title":621,"url":622},"RFC 5646: Tags for Identifying Languages","https:\u002F\u002Fwww.rfc-editor.org\u002Frfc\u002Frfc5646",{"title":624,"url":625},"Rat für deutsche Rechtschreibung","https:\u002F\u002Fwww.rechtschreibrat.com\u002F",{"title":627,"url":628},"Microsoft Writing Style Guide","https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fstyle-guide\u002Fwelcome\u002F","\u002Fimages\u002Fblog\u002Fllm-translation-pipeline-i18n\u002Fcover.webp","\u002Fimages\u002Fblog\u002Fllm-translation-pipeline-i18n\u002Fog.jpg",[54,55,56],"Eine LLM-Übersetzungspipeline für i18n: Glossar, Platzhalter und Review","Produkt- und Website-Texte mit LLMs übersetzen, ohne Platzhalter, Pluralformen oder Tonalität zu beschädigen: Glossar, ICU-Nachrichten, QA-Checks, Review.","Drei Quellkarten, eine übersetzte Karte mit Glossar-Lesezeichen, dann eine geprüfte Klemmschiene.",1792261158249]