TestCafe how to reload actual page

Question

Is there a way to reload the actual tested page I'm visiting in TestCafe and not the site that TestCafe is running under. I've tried using:

await t.eval(() => location.reload(true));

but that just reloads the server page that TestCafe uses. So for example, if I test www.google.com, the URL in the browser after I launch TestCafe will be something like http://172.16.0.152:58486/Qf6eMxOvA/https:/www.google.com/ That is the site that reloads when I execute the code above. Is there a way to force just reloading www.google.com to actually simulate reloading the tested page?

Richardson

btw. the location.reload(true) uses a non-standard argument. Firefox is the only browser to implement this. It is basically like pressing Shift + F5. Other browsers ignore this argument. – Rancid

Answer 1

await t.eval(() => location.reload(true));

You are right, you should use the code provided above to reload your test page.

Please check out the following example. The example works as expected: we check the local storage value after the page reload.

test.js:

import { ClientFunction } from 'testcafe';

fixture `fixture`
    .page `http://devexpress.github.io/testcafe/example`;

const getLocalStorageItem = ClientFunction(key => localStorage.getItem(key));

test('local storage', async t => {
    await t.eval(() => localStorage.setItem('key', 'value'));
    await t.expect(getLocalStorageItem('key')).eql('value');
    await t.wait(2000);
    await t.eval(() => location.reload(true));
    await t.wait(2000);
    await t.expect(getLocalStorageItem('key')).eql('value');
});

Result:

Running tests in:
- Chrome 74.0.3729 / Windows 10.0.0

fixture
√ local storage


1 passed (9s)

Roughage

we had a specific bug that when reloading the page, an error is thrown on the page. but when i tried reloading the page through testcafe, i cannot reproduce the bug. i'm guessing when testcafe reloads, it reloads the testcafe page that its using to fetch my tested page. so in effect, its acting like another navigation event to my tested page instead of a reload event. is there a way actually reload the tested page? – Richardson

@Richardson There should be no difference between reloading of the page with or without testcafe. Could you provide additional information: tested page URL, the error message, command-line arguments (for example --skip-js-errors argument could be the source of the problem)? – Rhiannonrhianon

Answer 2

Do try to avoid eval and wait in general. Make use of Testcafe's ClientFunction instead. I use something like this in my base page object:

  async refresh () {
    await ClientFunction(() => {
      document.location.reload();
    })();
  }

then in your test, call it with something like myPage.refresh()

Harmonie