{"id":17562,"date":"2026-03-09T15:13:35","date_gmt":"2026-03-09T15:13:35","guid":{"rendered":"https:\/\/www.anamata.nl\/?page_id=17562"},"modified":"2026-03-09T15:37:00","modified_gmt":"2026-03-09T15:37:00","slug":"playwright-architecture","status":"publish","type":"page","link":"https:\/\/www.anamata.eu\/nl\/playwright-architecture\/","title":{"rendered":"Playwright Architecture"},"content":{"rendered":"\n
<\/div>
\n
\n\n\n\n\n\nPlaywright Architectuur \u2014 Pega<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=JetBrains+Mono:wght@400;600;700&family=DM+Sans:wght@300;400;600;700&display=swap');\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n :root {\n --navy: #0D1B2A; --navyMid: #1A2E45; --navyLight: #243C56;\n --teal: #00B4A6; --tealDim: #007A6E; --white: #FFFFFF; --offwhite: #E8F0F4;\n --gray: #8BA0B0; --green: #4CAF82; --amber: #F59E0B; --red: #E05C5C; --purple: #9B72CF; --slate: #4A6070;\n --layer-test: #E05C5C; --layer-scenario: #F59E0B; --layer-step: #00B4A6;\n --layer-api: #9B72CF; --layer-dxapi: #E07B39; --layer-locator: #4CAF82; --layer-widget: #3A8FD4;\n }\n body { background: var(--navy); font-family: 'DM Sans', sans-serif; color: var(--white); min-height: 100vh; padding: 40px; }\n h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.3px; }\n .subtitle { font-size: 13px; color: var(--gray); margin-bottom: 8px; font-weight: 300; }\n .hint { font-size: 11px; color: var(--gray); font-family: 'JetBrains Mono', monospace; margin-bottom: 28px; opacity: 0.7; }\n .hint span { color: var(--teal); }\n\n .diagram { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 1200px; margin: 0 auto; }\n\n .layer-row { display: grid; grid-template-columns: 130px 1fr; position: relative; }\n .layer-label { display: flex; align-items: center; justify-content: flex-end; padding-right: 18px; padding-top: 12px; padding-bottom: 12px; }\n .layer-badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 4px; letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap; }\n .layer-content { padding: 12px 0 12px 24px; display: flex; flex-direction: column; border-left: 2px solid var(--navyLight); position: relative; }\n .layer-content::before { content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color, var(--teal)); }\n\n .cards { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }\n\n .card {\n background: var(--navyMid); border: 1px solid var(--navyLight);\n border-radius: 8px; padding: 12px 14px; position: relative; overflow: hidden;\n transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s, background 0.18s, opacity 0.18s;\n cursor: pointer;\n }\n .card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--accent-color, var(--teal)); }\n .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }\n .card.active {\n border-color: var(--accent-color, var(--teal));\n background: color-mix(in srgb, var(--accent-color, var(--teal)) 20%, var(--navyMid));\n box-shadow: 0 0 0 2px var(--accent-color, var(--teal));\n transform: translateY(-2px);\n }\n .card.highlighted {\n border-color: var(--accent-color, var(--teal));\n background: color-mix(in srgb, var(--accent-color, var(--teal)) 12%, var(--navyMid));\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color, var(--teal)) 50%, transparent);\n transform: translateY(-2px);\n }\n .card.dimmed { opacity: 0.15; transform: none; pointer-events: none; }\n\n .card-title { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; color: var(--accent-color, var(--teal)); margin-bottom: 4px; }\n .card-desc { font-size: 11.5px; color: var(--gray); line-height: 1.5; font-weight: 300; }\n .card-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #5a7a8a; margin-top: 6px; }\n .card-sm { min-width: 160px; max-width: 200px; }\n .card-md { min-width: 210px; max-width: 270px; }\n .card-lg { min-width: 290px; max-width: 360px; }\n .card-xl { min-width: 340px; }\n\n .arrow-row { display: grid; grid-template-columns: 130px 1fr; }\n .arrow-line { padding-left: 24px; display: flex; align-items: center; height: 28px; border-left: 2px solid var(--navyLight); }\n .arrow-inner { display: flex; align-items: center; gap: 6px; color: var(--gray); font-size: 11px; font-family: 'JetBrains Mono', monospace; }\n\n \/* split: UI + API side by side *\/\n .split-section { display: grid; grid-template-columns: 130px 1fr 1fr; }\n .split-label { display: flex; align-items: flex-start; justify-content: flex-end; padding-right: 18px; padding-top: 14px; }\n .split-half { padding: 12px 0 12px 24px; border-left: 2px solid var(--navyLight); position: relative; }\n .split-half::before { content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; }\n .split-half.ui::before { background: var(--layer-step); }\n .split-half.api::before { background: var(--layer-api); }\n .split-half.api { border-left: 1px dashed var(--navyLight); padding-left: 20px; }\n .split-header { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--navyLight); }\n\n \/* DX API row \u2014 same split layout but only right half has content *\/\n .dxapi-section { display: grid; grid-template-columns: 130px 1fr 1fr; }\n .dxapi-label { display: flex; align-items: flex-start; justify-content: flex-end; padding-right: 18px; padding-top: 14px; }\n .dxapi-empty { border-left: 2px solid var(--navyLight); }\n .dxapi-half { padding: 12px 0 12px 20px; border-left: 1px dashed var(--navyLight); position: relative; }\n .dxapi-half::before { content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--layer-dxapi); }\n\n \/* locators + widgets *\/\n .widget-section { display: grid; grid-template-columns: 130px 1fr; }\n .widget-content { padding: 12px 0 12px 24px; border-left: 2px solid var(--navyLight); position: relative; }\n .widget-content::before { content: ''; position: absolute; left: -5px; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--layer-locator); }\n .widget-grid { display: flex; flex-wrap: wrap; gap: 10px; }\n\n .widget-card {\n background: var(--navyMid); border: 1px solid var(--navyLight);\n border-radius: 8px; overflow: hidden; min-width: 160px; max-width: 200px;\n transition: transform 0.15s, border-color 0.18s, background 0.18s, opacity 0.18s;\n cursor: default;\n }\n .widget-card:hover { transform: translateY(-2px); }\n .widget-card.highlighted {\n border-color: var(--layer-widget);\n background: rgba(58,143,212,0.1);\n box-shadow: 0 0 0 2px rgba(58,143,212,0.5);\n transform: translateY(-2px);\n }\n .widget-card.dimmed { opacity: 0.15; }\n .widget-card-header { padding: 8px 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }\n .widget-card-methods { padding: 6px 12px 10px; display: flex; flex-direction: column; gap: 3px; }\n .method { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--gray); padding: 2px 6px; background: rgba(255,255,255,0.03); border-radius: 3px; }\n .method span { color: var(--teal); }\n code { background: none; }\n\n .note { background: rgba(0,180,166,0.07); border: 1px solid var(--tealDim); border-radius: 6px; padding: 8px 12px; font-size: 11.5px; color: var(--gray); margin-top: 10px; line-height: 1.55; }\n .note strong { color: var(--teal); font-weight: 600; }\n\n .legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--navyLight); max-width: 1200px; margin-left: auto; margin-right: auto; }\n .legend-item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--gray); }\n .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }\n<\/style>\n<\/head>\n<body>\n\n<div style=\"max-width:1200px;margin:0 auto;\">\n <p class=\"subtitle\">Tests \u2192 Scenarios \u2192 Steps (UI + API) \u2192 DX API Wrappers \u2192 Locators \u2192 Widget Locators<\/p>\n <p class=\"hint\">\u2192 Klik op een kaart om <span>verbonden lagen te highlighten<\/span>. Klik nogmaals of buiten om te resetten.<\/p>\n<\/div>\n\n<div class=\"diagram\">\n\n <!-- \u2550\u2550 TESTS \u2550\u2550 -->\n <div class=\"layer-row\">\n <div class=\"layer-label\">\n <span class=\"layer-badge\" style=\"background:rgba(224,92,92,0.15);color:var(--layer-test);border:1px solid rgba(224,92,92,0.3);\">Tests<\/span>\n <\/div>\n <div class=\"layer-content\" style=\"--accent-color:var(--layer-test)\">\n <div class=\"cards\">\n <div class=\"card card-md\" id=\"c-myflow\" data-highlights=\"c-login-scenario,c-collect-scenarios\" style=\"--accent-color:var(--layer-test)\">\n <div class=\"card-title\">myFlow.spec.ts<\/div>\n <div class=\"card-desc\">Roept LoginScenarios en CollectInformationScenarios aan. Geen directe UI of API interactie.<\/div>\n <div class=\"card-sub\">import { login } from ‘..\/Scenarios\/loginScenarios’<\/div>\n <\/div>\n <div class=\"card card-md\" id=\"c-anotherflow\" data-highlights=\"\" style=\"--accent-color:var(--layer-test)\">\n <div class=\"card-title\">anotherFlow.spec.ts<\/div>\n <div class=\"card-desc\">Meerdere tests kunnen hetzelfde Scenario hergebruiken met andere context of data.<\/div>\n <div class=\"card-sub\">testContext: TestContext<\/div>\n <\/div>\n <div class=\"note\" style=\"align-self:center;\">\n <strong>Regel:<\/strong> Tests bevatten geen logica. Ze orchestreren Scenarios en doen <code style=\"font-family:JetBrains Mono,monospace;font-size:10px;\">expect()<\/code> assertions.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"arrow-row\"><div><\/div><div class=\"arrow-line\"><div class=\"arrow-inner\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"><path d=\"M6 1v8M3 7l3 3 3-3\" stroke=\"var(--gray)\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>importeert & roept aan<\/div><\/div><\/div>\n\n <!-- \u2550\u2550 SCENARIOS \u2550\u2550 -->\n <div class=\"layer-row\">\n <div class=\"layer-label\">\n <span class=\"layer-badge\" style=\"background:rgba(245,158,11,0.15);color:var(--layer-scenario);border:1px solid rgba(245,158,11,0.3);\">Scenarios<\/span>\n <\/div>\n <div class=\"layer-content\" style=\"--accent-color:var(--layer-scenario)\">\n <div class=\"cards\">\n <div class=\"card card-md\" id=\"c-login-scenario\" data-highlights=\"c-login-page\" style=\"--accent-color:var(--layer-scenario)\">\n <div class=\"card-title\">LoginScenarios<\/div>\n <div class=\"card-desc\">Afhandelen van login flows. Alleen UI \u2014 geen API-equivalent.<\/div>\n <div class=\"card-sub\">Scenarios\/loginScenarios.ts<\/div>\n <\/div>\n <div class=\"card card-lg\" id=\"c-collect-scenarios\"\n data-highlights=\"c-personal-step,c-payment-step,c-myworklist-step,c-api-personal,c-api-payment,c-api-worklist\"\n style=\"--accent-color:var(--layer-scenario)\">\n <div class=\"card-title\">CollectInformationScenarios<\/div>\n <div class=\"card-desc\">Ontvangt een <code style=\"font-family:JetBrains Mono,monospace;font-size:10px;\">strategy: 'UI' | 'API'<\/code> bij instantiatie. Zelfde scenario-logica, de ge\u00efnjecteerde implementatie bepaalt de uitvoering.<\/div>\n <div class=\"card-sub\">new CollectInformationScenarios(ctx, <span style=\"color:var(--amber)\">‘UI’<\/span> | <span style=\"color:var(--purple)\">‘API’<\/span>)<\/div>\n <\/div>\n <\/div>\n <div class=\"note\" style=\"margin-top:10px;\">\n <strong>Regel:<\/strong> Een Scenario weet <em>wat<\/em> er moet gebeuren, niet <em>hoe<\/em>. De <code style=\"font-family:JetBrains Mono,monospace;font-size:10px;\">strategy<\/code> bepaalt welke implementatie wordt gebruikt \u2014 de logica blijft \u00e9\u00e9n.\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"arrow-row\"><div><\/div><div class=\"arrow-line\"><div class=\"arrow-inner\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"><path d=\"M6 1v8M3 7l3 3 3-3\" stroke=\"var(--gray)\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>delegeert op basis van strategy naar UI- of API-stap<\/div><\/div><\/div>\n\n <!-- \u2550\u2550 STEPS (UI + API) \u2550\u2550 -->\n <div class=\"split-section\">\n <div class=\"split-label\">\n <span class=\"layer-badge\" style=\"background:rgba(0,180,166,0.12);color:var(--layer-step);border:1px solid rgba(0,180,166,0.25);\">Steps<\/span>\n <\/div>\n\n <!-- UI -->\n <div class=\"split-half ui\">\n <div class=\"split-header\" style=\"color:var(--layer-step)\">UI \u2014 Page Objects (per Assignment)<\/div>\n <div class=\"cards\">\n <div class=\"card card-md\" id=\"c-login-page\"\n data-highlights=\"c-loc-text,c-loc-autocomplete\"\n data-widgets=\"\"\n style=\"--accent-color:var(--layer-step)\">\n <div class=\"card-title\">LoginPage<\/div>\n <div class=\"card-desc\">Login-flow via UI. Geen API-equivalent \u2014 vereist echte browsersessie.<\/div>\n <div class=\"card-sub\">pages\/loginPage.ts  \u00b7  <span style=\"color:var(--amber);\">UI only<\/span><\/div>\n <\/div>\n <div class=\"card card-md\" id=\"c-personal-step\"\n data-highlights=\"c-loc-text,c-loc-datepicker,c-loc-autocomplete\"\n data-widgets=\"wc-datepicker,wc-autocomplete\"\n style=\"--accent-color:var(--layer-step)\">\n <div class=\"card-title\">CollectPersonalDetailsStep<\/div>\n <div class=\"card-desc\">Vult persoonlijke gegevens in. Gebruikt TextLocator, DatePickerLocator, AutocompleteLocator.<\/div>\n <div class=\"card-sub\">pages\/collectPersonalDetails.ts<\/div>\n <\/div>\n <div class=\"card card-md\" id=\"c-payment-step\"\n data-highlights=\"c-loc-text,c-loc-dropdown\"\n data-widgets=\"wc-dropdown\"\n style=\"--accent-color:var(--layer-step)\">\n <div class=\"card-title\">CollectPaymentDetailsStep<\/div>\n <div class=\"card-desc\">Vult betalingsgegevens in. Gebruikt TextLocator en DropdownLocator.<\/div>\n <div class=\"card-sub\">pages\/collectPaymentDetails.ts<\/div>\n <\/div>\n <div class=\"card card-md\" id=\"c-myworklist-step\"\n data-highlights=\"c-loc-text\"\n data-widgets=\"\"\n style=\"--accent-color:var(--layer-step)\">\n <div class=\"card-title\">MyWorkList<\/div>\n <div class=\"card-desc\">Navigeert en interacteert met de Pega worklist. Selecteert assignments.<\/div>\n <div class=\"card-sub\">pages\/myWorkList.ts<\/div>\n <\/div>\n <\/div>\n <div class=\"note\" style=\"margin-top:10px;\">Niet \u00e9\u00e9n Page Object per flow \u2014 maar per <strong>assignment<\/strong>. Klein, focused, vervangbaar.<\/div>\n <\/div>\n\n <!-- API -->\n <div class=\"split-half api\">\n <div class=\"split-header\" style=\"color:var(--layer-api)\">API \u2014 API Objects (equivalent per Assignment)<\/div>\n <div class=\"cards\">\n <div class=\"card card-md\" id=\"c-api-personal\"\n data-highlights=\"c-dx-getcase,c-dx-patchcase\"\n style=\"--accent-color:var(--layer-api)\">\n <div class=\"card-title\">APICollectPersonalDetails<\/div>\n <div class=\"card-desc\">Zet of valideert persoonlijke gegevens via Pega REST. Gebruikt getCase + patchCase.<\/div>\n <div class=\"card-sub\">API\/pages\/apiCollectPersonalDetails.ts<\/div>\n <\/div>\n <div class=\"card card-md\" id=\"c-api-payment\"\n data-highlights=\"c-dx-getcase,c-dx-patchcase\"\n style=\"--accent-color:var(--layer-api)\">\n <div class=\"card-title\">APICollectPaymentDetails<\/div>\n <div class=\"card-desc\">Verwerkt betalingsgegevens via API. Gebruikt getCase + patchCase.<\/div>\n <div class=\"card-sub\">API\/pages\/apiCollectPaymentDetails.ts<\/div>\n <\/div>\n <div class=\"card card-md\" id=\"c-api-worklist\"\n data-highlights=\"c-dx-getcases,c-dx-getassignment\"\n style=\"--accent-color:var(--layer-api)\">\n <div class=\"card-title\">APIMyWorkList<\/div>\n <div class=\"card-desc\">Valideert worklist via API. Gebruikt getCases + getAssignment.<\/div>\n <div class=\"card-sub\">API\/pages\/apiMyWorkList.ts<\/div>\n <\/div>\n <\/div>\n <div class=\"note\" style=\"margin-top:10px;border-color:rgba(155,114,207,0.4);background:rgba(155,114,207,0.07);\">\n <strong style=\"color:var(--layer-api);\">Gebruik:<\/strong> setup\/teardown, validatie achter de UI, of vervanging van trage UI-stappen.\n <\/div>\n <\/div>\n <\/div>\n\n <!-- \u2550\u2550 COLLAPSEABLE: DX API WRAPPERS \u2550\u2550 -->\n <div class=\"dxapi-section\" style=\"cursor:pointer;\" onclick=\"toggleDxApi()\">\n <div class=\"dxapi-label\">\n <span class=\"layer-badge\" style=\"background:rgba(224,123,57,0.15);color:var(--layer-dxapi);border:1px solid rgba(224,123,57,0.3);\">DX API<\/span>\n <\/div>\n <div class=\"dxapi-empty\"><\/div>\n <div class=\"dxapi-half\" style=\"display:flex; align-items:center; gap:10px; padding-top:10px; padding-bottom:10px;\">\n <span style=\"font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--gray);\">\n Pega DX API Wrappers \u2014 getCase, patchCase, createCase, getCases, getAssignment, submitAssignment\n <\/span>\n <span id=\"dxapi-chevron\" style=\"font-size:12px; color:var(--layer-dxapi); margin-left:auto; white-space:nowrap;\">\u25bc uitklappen<\/span>\n <\/div>\n <\/div>\n\n <div id=\"dxapi-body\" style=\"display:none;\">\n <div class=\"dxapi-section\">\n <div><\/div>\n <div class=\"dxapi-empty\"><\/div>\n <div class=\"dxapi-half\" style=\"padding-top:6px;\">\n <div class=\"cards\">\n <div class=\"card card-sm\" id=\"c-dx-getcase\" data-highlights=\"\" style=\"--accent-color:var(--layer-dxapi)\">\n <div class=\"card-title\">getCase()<\/div>\n <div class=\"card-desc\">GET \/cases\/{caseID} \u2014 haalt case data op inclusief fields en metadata.<\/div>\n <div class=\"card-sub\">Commons\/DXAPI\/getCase.ts<\/div>\n <\/div>\n <div class=\"card card-sm\" id=\"c-dx-patchcase\" data-highlights=\"\" style=\"--accent-color:var(--layer-dxapi)\">\n <div class=\"card-title\">patchCase()<\/div>\n <div class=\"card-desc\">PATCH \/cases\/{caseID} \u2014 update velden op een bestaande case.<\/div>\n <div class=\"card-sub\">Commons\/DXAPI\/patchCase.ts<\/div>\n <\/div>\n <div class=\"card card-sm\" id=\"c-dx-createcase\" data-highlights=\"\" style=\"--accent-color:var(--layer-dxapi)\">\n <div class=\"card-title\">createCase()<\/div>\n <div class=\"card-desc\">POST \/cases \u2014 maakt een nieuwe case aan met initi\u00eble data.<\/div>\n <div class=\"card-sub\">Commons\/DXAPI\/createCase.ts<\/div>\n <\/div>\n <div class=\"card card-sm\" id=\"c-dx-getcases\" data-highlights=\"\" style=\"--accent-color:var(--layer-dxapi)\">\n <div class=\"card-title\">getCases()<\/div>\n <div class=\"card-desc\">GET \/cases \u2014 haalt lijst van cases op, filterable op type en status.<\/div>\n <div class=\"card-sub\">Commons\/DXAPI\/getCases.ts<\/div>\n <\/div>\n <div class=\"card card-sm\" id=\"c-dx-getassignment\" data-highlights=\"\" style=\"--accent-color:var(--layer-dxapi)\">\n <div class=\"card-title\">getAssignment()<\/div>\n <div class=\"card-desc\">GET \/assignments\/{assignmentID} \u2014 haalt assignment details en fields op.<\/div>\n <div class=\"card-sub\">Commons\/DXAPI\/getAssignment.ts<\/div>\n <\/div>\n <div class=\"card card-sm\" id=\"c-dx-submitassignment\" data-highlights=\"\" style=\"--accent-color:var(--layer-dxapi)\">\n <div class=\"card-title\">submitAssignment()<\/div>\n <div class=\"card-desc\">POST \/assignments\/{id}\/actions\/{action} \u2014 submit een assignment action.<\/div>\n <div class=\"card-sub\">Commons\/DXAPI\/submitAssignment.ts<\/div>\n <\/div>\n <\/div>\n <div class=\"note\" style=\"margin-top:10px; border-color:rgba(224,123,57,0.4); background:rgba(224,123,57,0.07);\">\n <strong style=\"color:var(--layer-dxapi);\">Commons:<\/strong> Alle API steps bouwen op dezelfde wrappers. Authenticatie, error handling en request formatting zitten hier \u2014 niet in de individuele steps.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- \u2550\u2550 COLLAPSEABLE: LOCATORS + WIDGETS \u2550\u2550 -->\n <div class=\"layer-row\" id=\"locator-toggle-row\" style=\"cursor:pointer;\" onclick=\"toggleLocators()\">\n <div class=\"layer-label\">\n <span class=\"layer-badge\" style=\"background:rgba(76,175,130,0.15);color:var(--layer-locator);border:1px solid rgba(76,175,130,0.3);\">Locators<\/span>\n <\/div>\n <div class=\"layer-content\" style=\"--accent-color:var(--layer-locator); padding-top:10px; padding-bottom:10px;\">\n <div style=\"display:flex; align-items:center; gap:10px;\">\n <span style=\"font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--gray);\">\n Locators & Widget Locators \u2014 UI Page Objects gebruiken deze gedeelde bibliotheek\n <\/span>\n <span id=\"locator-chevron\" style=\"font-size:12px; color:var(--layer-locator); margin-left:auto; transition: transform 0.2s; display:inline-block;\">\u25bc uitklappen<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div id=\"locator-body\" style=\"display:none; overflow:hidden;\">\n\n <!-- Locators content -->\n <div class=\"layer-row\">\n <div class=\"layer-label\"><\/div>\n <div class=\"layer-content\" style=\"--accent-color:var(--layer-locator); padding-top:6px;\">\n <div class=\"cards\">\n <div class=\"card card-sm\" id=\"c-loc-base\" data-highlights=\"\" style=\"--accent-color:var(--layer-locator);cursor:default;\">\n <div class=\"card-title\">BaseLocator<\/div>\n <div class=\"card-desc\">Gedeelde basis. Bevat de Playwright <code style=\"font-family:JetBrains Mono,monospace;font-size:10px;\">page<\/code> referentie en basis-methodes.<\/div>\n <\/div>\n <div class=\"card card-sm\" id=\"c-loc-text\" data-highlights=\"\" style=\"--accent-color:var(--layer-locator);cursor:default;\">\n <div class=\"card-title\">TextLocator<\/div>\n <div class=\"card-desc\">Enkelvoudige tekstvelden. <code style=\"font-family:JetBrains Mono,monospace;font-size:10px;\">fill()<\/code>, <code style=\"font-family:JetBrains Mono,monospace;font-size:10px;\">clear()<\/code>, <code style=\"font-family:JetBrains Mono,monospace;font-size:10px;\">getValue()<\/code><\/div>\n <\/div>\n <div class=\"card card-sm\" id=\"c-loc-datepicker\" data-highlights=\"wc-datepicker\" data-widget=\"wc-datepicker\" style=\"--accent-color:var(--layer-widget);\">\n <div class=\"card-title\">DatePickerLocator<\/div>\n <div class=\"card-desc\">Widget-aware. Weet hoe een Pega datepicker werkt.<\/div>\n <div class=\"card-sub\" style=\"color:var(--layer-widget);\">\u2193 zie widgets<\/div>\n <\/div>\n <div class=\"card card-sm\" id=\"c-loc-richtext\" data-highlights=\"wc-richtext\" data-widget=\"wc-richtext\" style=\"--accent-color:var(--layer-widget);\">\n <div class=\"card-title\">RichTextLocator<\/div>\n <div class=\"card-desc\">Widget-aware. Pega rich text editor.<\/div>\n <div class=\"card-sub\" style=\"color:var(--layer-widget);\">\u2193 zie widgets<\/div>\n <\/div>\n <div class=\"card card-sm\" id=\"c-loc-autocomplete\" data-highlights=\"wc-autocomplete\" data-widget=\"wc-autocomplete\" style=\"--accent-color:var(--layer-widget);\">\n <div class=\"card-title\">AutocompleteLocator<\/div>\n <div class=\"card-desc\">Widget-aware. Typt, wacht op dropdown, selecteert optie.<\/div>\n <div class=\"card-sub\" style=\"color:var(--layer-widget);\">\u2193 zie widgets<\/div>\n <\/div>\n <div class=\"card card-sm\" id=\"c-loc-dropdown\" data-highlights=\"wc-dropdown\" data-widget=\"wc-dropdown\" style=\"--accent-color:var(--layer-widget);\">\n <div class=\"card-title\">DropdownLocator<\/div>\n <div class=\"card-desc\">Widget-aware. Selecteert opties uit Pega dropdown.<\/div>\n <div class=\"card-sub\" style=\"color:var(--layer-widget);\">\u2193 zie widgets<\/div>\n <\/div>\n <\/div>\n <div class=\"note\" style=\"margin-top:10px;\"><strong>Gedeelde bibliotheek<\/strong> \u2014 los van Page Objects. Selector-strategie zit hier, niet in de Page.<\/div>\n <\/div>\n <\/div>\n\n <!-- arrow -->\n <div class=\"arrow-row\"><div><\/div><div class=\"arrow-line\"><div class=\"arrow-inner\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"><path d=\"M6 1v8M3 7l3 3 3-3\" stroke=\"var(--gray)\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>Widget Locators bevatten widget-specifieke interacties<\/div><\/div><\/div>\n\n <!-- Widgets -->\n <div class=\"widget-section\">\n <div class=\"layer-label\" style=\"padding-right:18px;padding-top:14px;\">\n <span class=\"layer-badge\" style=\"background:rgba(58,143,212,0.15);color:var(--layer-widget);border:1px solid rgba(58,143,212,0.3);\">Widgets<\/span>\n <\/div>\n <div class=\"widget-content\">\n <div class=\"widget-grid\">\n <div class=\"widget-card\" id=\"wc-datepicker\"><div class=\"widget-card-header\" style=\"background:rgba(58,143,212,0.15);color:var(--layer-widget);\">DatePickerLocator<\/div><div class=\"widget-card-methods\"><div class=\"method\"><span>fill<\/span>(date: string)<\/div><div class=\"method\"><span>selectFromCalendar<\/span>(date)<\/div><div class=\"method\"><span>checkLabel<\/span>(label: string)<\/div><div class=\"method\"><span>getValue<\/span>()<\/div><div class=\"method\"><span>clear<\/span>()<\/div><\/div><\/div>\n <div class=\"widget-card\" id=\"wc-richtext\"><div class=\"widget-card-header\" style=\"background:rgba(58,143,212,0.15);color:var(--layer-widget);\">RichTextLocator<\/div><div class=\"widget-card-methods\"><div class=\"method\"><span>fill<\/span>(text: string)<\/div><div class=\"method\"><span>checkLabel<\/span>(label: string)<\/div><div class=\"method\"><span>getTextContent<\/span>()<\/div><div class=\"method\"><span>isEditable<\/span>()<\/div><div class=\"method\"><span>clear<\/span>()<\/div><\/div><\/div>\n <div class=\"widget-card\" id=\"wc-autocomplete\"><div class=\"widget-card-header\" style=\"background:rgba(58,143,212,0.15);color:var(--layer-widget);\">AutocompleteLocator<\/div><div class=\"widget-card-methods\"><div class=\"method\"><span>fill<\/span>(text: string)<\/div><div class=\"method\"><span>selectOption<\/span>(label: string)<\/div><div class=\"method\"><span>checkLabel<\/span>(label: string)<\/div><div class=\"method\"><span>getSelected<\/span>()<\/div><div class=\"method\"><span>clear<\/span>()<\/div><\/div><\/div>\n <div class=\"widget-card\" id=\"wc-dropdown\"><div class=\"widget-card-header\" style=\"background:rgba(58,143,212,0.15);color:var(--layer-widget);\">DropdownLocator<\/div><div class=\"widget-card-methods\"><div class=\"method\"><span>selectByLabel<\/span>(label: string)<\/div><div class=\"method\"><span>selectByValue<\/span>(value: string)<\/div><div class=\"method\"><span>checkLabel<\/span>(label: string)<\/div><div class=\"method\"><span>getOptions<\/span>()<\/div><div class=\"method\"><span>isDisabled<\/span>()<\/div><\/div><\/div>\n <div class=\"widget-card\" id=\"wc-checkbox\"><div class=\"widget-card-header\" style=\"background:rgba(58,143,212,0.15);color:var(--layer-widget);\">CheckboxLocator<\/div><div class=\"widget-card-methods\"><div class=\"method\"><span>check<\/span>()<\/div><div class=\"method\"><span>uncheck<\/span>()<\/div><div class=\"method\"><span>checkLabel<\/span>(label: string)<\/div><div class=\"method\"><span>isChecked<\/span>()<\/div><div class=\"method\"><span>click<\/span>()<\/div><\/div><\/div>\n <\/div>\n <div class=\"note\" style=\"margin-top:12px;\"><strong>Elke widget-klasse<\/strong> abstraheert de DOM-complexiteit van dat Pega-component. De Page hoeft niet te weten hoe een datepicker intern werkt.<\/div>\n <\/div>\n <\/div>\n\n <\/div><!-- \/locator-body -->\n\n<\/div><!-- \/diagram -->\n\n<div class=\"legend\">\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:var(--layer-test)\"><\/div> Tests<\/div>\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:var(--layer-scenario)\"><\/div> Scenarios<\/div>\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:var(--layer-step)\"><\/div> UI Steps<\/div>\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:var(--layer-api)\"><\/div> API Steps<\/div>\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:var(--layer-dxapi)\"><\/div> DX API Wrappers<\/div>\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:var(--layer-locator)\"><\/div> Locators<\/div>\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:var(--layer-widget)\"><\/div> Widget Locators<\/div>\n<\/div>\n\n<script>\n function toggleDxApi(forceOpen) {\n const body = document.getElementById('dxapi-body');\n const chevron = document.getElementById('dxapi-chevron');\n const isOpen = body.style.display !== 'none';\n const open = forceOpen !== undefined ? forceOpen : !isOpen;\n body.style.display = open ? 'block' : 'none';\n chevron.textContent = open ? '\u25b2 inklappen' : '\u25bc uitklappen';\n }\n\n function toggleLocators(forceOpen) {\n const body = document.getElementById('locator-body');\n const chevron = document.getElementById('locator-chevron');\n const isOpen = body.style.display !== 'none';\n const open = forceOpen !== undefined ? forceOpen : !isOpen;\n body.style.display = open ? 'block' : 'none';\n chevron.textContent = open ? '\u25b2 inklappen' : '\u25bc uitklappen';\n }\n\n let activeId = null;\n\n \/\/ All clickable cards (those with an id and data-highlights attribute)\n const clickableCards = document.querySelectorAll('.card[id][data-highlights]');\n \/\/ All cards including non-clickable (for dimming)\n const allCards = document.querySelectorAll('.card[id]');\n \/\/ Widget cards\n const allWidgetCards = document.querySelectorAll('.widget-card[id]');\n\n clickableCards.forEach(card => {\n if (card.style.cursor === 'default') return;\n\n card.addEventListener('click', e => {\n e.stopPropagation();\n const id = card.id;\n\n if (activeId === id) { reset(); return; }\n activeId = id;\n\n \/\/ Clear all states\n allCards.forEach(c => c.classList.remove('active', 'highlighted', 'dimmed'));\n allWidgetCards.forEach(w => w.classList.remove('highlighted', 'dimmed'));\n\n card.classList.add('active');\n\n \/\/ Cards to highlight\n const cardTargets = (card.dataset.highlights || '').split(',').map(s => s.trim()).filter(Boolean);\n \/\/ Widget cards to highlight (from data-widgets on UI step cards)\n const widgetTargets = (card.dataset.widgets || '').split(',').map(s => s.trim()).filter(Boolean);\n\n \/\/ Separate card targets from widget card targets (widget ids start with 'wc-')\n const widgetCardTargets = cardTargets.filter(t => t.startsWith('wc-'));\n const regularCardTargets = cardTargets.filter(t => !t.startsWith('wc-'));\n const allWidgetTargets = [...new Set([...widgetTargets, ...widgetCardTargets])];\n\n regularCardTargets.forEach(tid => {\n const el = document.getElementById(tid);\n if (el) el.classList.add('highlighted');\n });\n\n allWidgetTargets.forEach(wid => {\n const el = document.getElementById(wid);\n if (el) el.classList.add('highlighted');\n });\n\n \/\/ Auto-expand\/collapse DX API and Locators based on what's being highlighted\n const dxapiIds = ['c-dx-getcase','c-dx-patchcase','c-dx-createcase','c-dx-getcases','c-dx-getassignment','c-dx-submitassignment'];\n const locatorIds = ['c-loc-base','c-loc-text','c-loc-datepicker','c-loc-richtext','c-loc-autocomplete','c-loc-dropdown'];\n const hitsDxApi = regularCardTargets.some(t => dxapiIds.includes(t));\n const hitsLocator = regularCardTargets.some(t => locatorIds.includes(t)) || allWidgetTargets.length > 0;\n if (hitsDxApi) { toggleDxApi(true); toggleLocators(false); }\n if (hitsLocator) { toggleLocators(true); toggleDxApi(false); }\n \/\/ Locator card clicked \u2192 expand widgets too\n if (widgetCardTargets.length > 0) toggleLocators(true);\n\n \/\/ Dim everything not active or highlighted\n allCards.forEach(c => {\n if (!c.classList.contains('active') && !c.classList.contains('highlighted')) {\n c.classList.add('dimmed');\n }\n });\n\n allWidgetCards.forEach(w => {\n if (!w.classList.contains('highlighted')) {\n w.classList.add('dimmed');\n }\n });\n });\n });\n\n function reset() {\n activeId = null;\n allCards.forEach(c => c.classList.remove('active', 'highlighted', 'dimmed'));\n allWidgetCards.forEach(w => w.classList.remove('highlighted', 'dimmed'));\n }\n\n document.addEventListener('click', e => {\n if (!e.target.closest('.card[id][data-highlights]')) reset();\n });\n<\/script>\n<\/body>\n<\/html>\n<\/div><\/div>\n<\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"qubely_full_width","meta":{"qubely_global_settings":"","qubely_interactions":"","tpgb_global_settings":"","_gspb_post_css":"","content-type":"","_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"class_list":["post-17562","page","type-page","status-publish","hentry"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Playwright Architecture - Anamata<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anamata.eu\/nl\/playwright-architecture\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Playwright Architecture - Anamata\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anamata.eu\/nl\/playwright-architecture\/\" \/>\n<meta property=\"og:site_name\" content=\"Anamata\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-09T15:37:00+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.anamata.eu\\\/playwright-architecture\\\/\",\"url\":\"https:\\\/\\\/www.anamata.eu\\\/playwright-architecture\\\/\",\"name\":\"Playwright Architecture - Anamata\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.anamata.eu\\\/#website\"},\"datePublished\":\"2026-03-09T15:13:35+00:00\",\"dateModified\":\"2026-03-09T15:37:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.anamata.eu\\\/playwright-architecture\\\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.anamata.eu\\\/playwright-architecture\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.anamata.eu\\\/playwright-architecture\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Developing the Future. Today.\",\"item\":\"https:\\\/\\\/www.anamata.eu\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Playwright Architecture\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.anamata.eu\\\/#website\",\"url\":\"https:\\\/\\\/www.anamata.eu\\\/\",\"name\":\"Anamata\",\"description\":\"Quality from the heart\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.anamata.eu\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.anamata.eu\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.anamata.eu\\\/#organization\",\"name\":\"Anamata\",\"url\":\"https:\\\/\\\/www.anamata.eu\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/www.anamata.eu\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.anamata.eu\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/Emmetjepadding.png\",\"contentUrl\":\"https:\\\/\\\/www.anamata.eu\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/Emmetjepadding.png\",\"width\":1067,\"height\":1067,\"caption\":\"Anamata\"},\"image\":{\"@id\":\"https:\\\/\\\/www.anamata.eu\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Playwright Architecture - Anamata","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anamata.eu\/nl\/playwright-architecture\/","og_locale":"nl_NL","og_type":"article","og_title":"Playwright Architecture - Anamata","og_url":"https:\/\/www.anamata.eu\/nl\/playwright-architecture\/","og_site_name":"Anamata","article_modified_time":"2026-03-09T15:37:00+00:00","twitter_card":"summary_large_image","twitter_misc":{"Geschatte leestijd":"3 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.anamata.eu\/playwright-architecture\/","url":"https:\/\/www.anamata.eu\/playwright-architecture\/","name":"Playwright Architecture - Anamata","isPartOf":{"@id":"https:\/\/www.anamata.eu\/#website"},"datePublished":"2026-03-09T15:13:35+00:00","dateModified":"2026-03-09T15:37:00+00:00","breadcrumb":{"@id":"https:\/\/www.anamata.eu\/playwright-architecture\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anamata.eu\/playwright-architecture\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.anamata.eu\/playwright-architecture\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Developing the Future. Today.","item":"https:\/\/www.anamata.eu\/"},{"@type":"ListItem","position":2,"name":"Playwright Architecture"}]},{"@type":"WebSite","@id":"https:\/\/www.anamata.eu\/#website","url":"https:\/\/www.anamata.eu\/","name":"Anamata","description":"Quality from the heart","publisher":{"@id":"https:\/\/www.anamata.eu\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anamata.eu\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/www.anamata.eu\/#organization","name":"Anamata","url":"https:\/\/www.anamata.eu\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.anamata.eu\/#\/schema\/logo\/image\/","url":"https:\/\/www.anamata.eu\/wp-content\/uploads\/2024\/03\/Emmetjepadding.png","contentUrl":"https:\/\/www.anamata.eu\/wp-content\/uploads\/2024\/03\/Emmetjepadding.png","width":1067,"height":1067,"caption":"Anamata"},"image":{"@id":"https:\/\/www.anamata.eu\/#\/schema\/logo\/image\/"}}]}},"tpgb_featured_images":null,"tpgb_post_meta_info":{"get_date":"maart 9, 2026","get_modified_date":"maart 9, 2026","author_name":"anamata","author_url":"https:\/\/www.anamata.eu\/nl\/author\/anamata\/","author_email":"info@anamata.nl","author_website":"https:\/\/www.anamata.nl","author_description":"Hi my friend, I am Anamata, next-gen Low-Code expert.","author_facebook":"","author_twitter":"","author_instagram":"","author_role":["administrator"],"author_firstname":"","author_lastname":"","user_login":"anamata","author_avatar":"<img width=\"200\" height=\"200\" src=\"https:\/\/www.anamata.eu\/wp-content\/uploads\/2021\/05\/A.png?wsr\" class=\"avatar avatar-200 photo\" alt=\"\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/www.anamata.eu\/wp-content\/uploads\/2021\/05\/A.png 200w, https:\/\/www.anamata.eu\/wp-content\/uploads\/2021\/05\/A-150x150.png 150w, https:\/\/www.anamata.eu\/wp-content\/uploads\/2021\/05\/A-24x24.png 24w, https:\/\/www.anamata.eu\/wp-content\/uploads\/2021\/05\/A-48x48.png 48w, https:\/\/www.anamata.eu\/wp-content\/uploads\/2021\/05\/A-96x96.png 96w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/>","author_avatar_url":"https:\/\/www.anamata.eu\/wp-content\/uploads\/2021\/05\/A-96x96.png?wsr","comment_count":0,"post_likes":0,"post_views":0},"tpgb_post_category":[],"_links":{"self":[{"href":"https:\/\/www.anamata.eu\/nl\/wp-json\/wp\/v2\/pages\/17562","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anamata.eu\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.anamata.eu\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.anamata.eu\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anamata.eu\/nl\/wp-json\/wp\/v2\/comments?post=17562"}],"version-history":[{"count":14,"href":"https:\/\/www.anamata.eu\/nl\/wp-json\/wp\/v2\/pages\/17562\/revisions"}],"predecessor-version":[{"id":17579,"href":"https:\/\/www.anamata.eu\/nl\/wp-json\/wp\/v2\/pages\/17562\/revisions\/17579"}],"wp:attachment":[{"href":"https:\/\/www.anamata.eu\/nl\/wp-json\/wp\/v2\/media?parent=17562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}