> [!note] Aanleiding
> Probleem: Op basis van een response in de backend van de website word gebruiker een bepaald formulier getoond. De backend maakt gebruik van een extern systeem. Om niet afhankelijk te zijn van de bereikbaarheid van dit systeem en de aanwezige testdata heb ik besloten deze response te mocken. In eerste instantie maakte ik daarvoor gebruik van [[Chrome Override - Mocken in Chrome]] maar dit is niet inzetbaar voor testautomatisering.
De browser Library staat toe om zelf aanvullende keywords te maken en te importeren via jsextension. Ik vond deze super mooie oplossing: https://github.com/MarketSquare/robotframework-browser-extensions/blob/main/mockUrl/mockurl_example.robot
Deze oplossing maakt gebruik van de page.route() functionaliteit van Playwright.
# page.route()
Dit zijn de files die nodig zijn.
Let op; alle rechten aan de eigenaar van de repo! Ik sla wil alleen niet afhankelijk zijn van externe bron en dus heb ik het hier heen gekopieerd.
**mockUrl.robot**
```robot
*** Settings ***
Library Browser jsextension=${CURDIR}/mockUrl.js
*** Variables ***
${PAYLOAD} this is a mock response\nfor google.com
&{GOOGLE_MOCK} url=https://www.google.com/** contentType=text/plain statusCode=200 body=${PAYLOAD}
*** Test Cases ***
Test Mock Url
New Browser chromium
New Context baseURL=https://www.google.com
New Page about:blank # New Page has to be called or page.route ain't a function.
mockUrl ${GOOGLE_MOCK}
Go To /
Get Text body == ${PAYLOAD}
Close Browser
```
**mockUrl.js**
```js
async function mockUrl(args, page, logger) {
for (const arg of args) {
await page.route(String(arg.url), route => {
route.fulfill({
status: parseInt(arg.statusCode, 10),
contenttype: String(arg.contentType),
body: String(arg.body)
});
});
}
}
exports.__esModule = true;
exports.mockUrl = mockUrl
```
## 🤓 Wat ik hier uit geleerd heb
- Keyword toevoegen aan de browserLibrary die je via `jsextension=`
- Playwright heeft meer mogelijkheden dan de browser library op dit moment ondersteunt.
- Het is heel belangrijk om `page.route()` te herbruiken na een nieuwe context en nieuw page
## ❓Openstaande vragen
- In de flow waarvoor ik dit gebruik is er sprake van een loader die niet langer getoond word omdat de data al bestaat. Ik wil nog uitzoeken of er een vertraging in te bouwen is zodat ik ook de loader blijf zien en de flow meer compleet is.
- Omdat ik nieuw ben met browserLibrary moet ik nog eens onderzoeken wat `New Browser`, `new Context` en `New Page` doen ([[Robot Framework - Browser starten]]) ^7a5fe5
## Mijn Keywords
```robot
*** Settings ***
Library Browser jsextension=${CURDIR}/../../Libraries/PlaywrightExtension.js
*** Keywords ***
Mock API Response
[Arguments] ${mock_response_body}
${mockdata} Create Dictionary
... url=**/connections?*
... contentType=application/json; charset=utf-8
... statusCode=200
... body=${mock_response_body}
Browser.Mock Url ${mockdata}
Log Let op: De response wordt gemockt level=INFO
```
in het keyword staat dit tussen `New Page` en navigeren naar de website waarop de test wordt uitgevoerd.
> [!Warning] Let op
> Zorg dat in de bestanden die verwijzen naar het bestand met het keyword mock API Response niet OOK browser library importeren. Daardoor kwam ik fouten tegen.
> Het is sowieso goed om alleen Libraries te importeren in settings in de files waar je ze daadwerkelijk gebruikt en bij voorkeur niet in .robot bestanden.
**PlaywrightExtension.js**
```js
async function mockUrl(args, page, logger) {
for (const arg of args) {
await page.route(String(arg.url), route => {
console.log("Received args:", args);
route.fulfill({
status: parseInt(arg.statusCode, 10),
contenttype: String(arg.contentType),
body: String(arg.body)
});
});
}
}
exports.__esModule = true;
exports.mockUrl = mockUrl
```
Ik heb er nog een klein stukje logging aan toegepast omdat het in eerste instantie niet leek te werken.