Implementing a function in testcafé test that runs when the url of the browser changes

Question

Is it possible to implement a function that checks the change of the URL in the browser during the tests (window.location.href)? I tried to use a ClientFunction to do so. But I wasn't able to use async/await inside the ClientFunction. The other way around I wasn't able to get information with window.location.href in an async function. Is there another way to get to the information? :) I want to check whether the correct article is put into the basket of our shop. So I wanted to implement a function that always runs when an article is put into the basket and the program switches to the basket page. I used a setTimeout for that but I wasn't very successful with that. :D

Thank you so much!

Stefan

Answer 1

I assume that your test case performs some actions that add an article to the shop basket. I can't imagine a scenario when a test case awaits some "external" actions outside of it like another user works with your site to add articles to the basket.

You can check the current URL after your test case puts an article to the basket. You can retrieve the current URL and assert it as follows:

import { ClientFunction, t } from 'testcafe';

fixture `check url`
.page `http://example.com`;

test('check url', async t => {
const getLocation = ClientFunction(() => document.location.href);

```
await t.expect(getLocation()).contains('example.com');
```

});

If your scenario is different, please describe it in greater detail and/or provide your public URL where we can see your current behavior. If you still need some URL change detection, you might want to look at this thread: How to detect URL change in JavaScript.