Local storage is not saved correctly after Role is initialized

[AlexKamaev]

Are you requesting a feature or reporting a bug?

a bug

What is the current behavior?

local storage is not saved

What is the expected behavior?

local storage should work

Provide the test code and the tested page URL (if applicable)

see #2142 comments of @TestAndunR

[AlexKamaev]

@TestAndunR while the issue is not fixed you can use the following workaround. Modify your role initializer function by adding wait(5000) in the end. See the code below:

const registeredUser = Role('*****', async t => {
    await t
        .typeText(page.nameInput, '*****')
        .typeText(page.password, '*****')
        .click(page.signin)
        .wait(5000);
}, { preserveUrl: true });

[TestAndunR]

Hi @AlexKamaev, thank you for the reply. Yes this workaround work for me. Thank you

[darina-techery]

This workaround didn't work for me.
In my tests user can only be authenticated via localStorage. It requires a special 'token' property.
I try to authenticate user by running POST /login request and inserting the result into localStorage:

const roles = {
  asMainUser: Role(baseUrl, async () => {
    const loginResponse = await usersApi.login(mainUser.email, mainUser.password);
    const appState = JSON.stringify({
      session: loginResponse,
      settings: {}
    });
    console.log("Set app_state: "+appState);
    await client.localStorageSet("app_state", appState);

    console.log("Wait until app_state is found in localStorage");
    await t.expect(client.localStorageGet("app_state")).ok();

    console.log("app_state is found: "+await client.localStorageGet("app_state"));
    await t.wait(5000);
    console.log("Waited for 5 seconds");
  }, { preserveUrl : true })
};
export default roles;

All the checks say that localStorage is populated ok, and I even wait for 5 additional seconds, as suggested in a workaround.
In 50% cases the localStorage is empty after the role is applied, and the test fails.

I also tried removing preserveUrl and navigating to the page explicitly. No luck either.

[konqi]

If I read the code correctly from the hammerhead repo, persisting storages is simply not implemented.
So, at the moment, persistence and rehydration of the stores must be done manually.
This means that the first test, that uses the role will work, because the first call to useRole causes testcafe to go through the login procedure. Consecutive calls to useRole restore the Session, which contains cookies, but not the stores, thus every consecutive test that requires values from local or session store will fail.

[AlexKamaev]

Hi @konki
The roles mechanism is supposed to work with both cookies and storage. The storage persistence is supported, so it is not required to do it manually. The cause of @darina-techery's issue was in overriding storage by some client script. Please refer #2782 to see details.

[konqi]

@AlexKamaev Nice! Can you point me to the right place where storage persistence is implemented, because it is not working for me and I'd like to debug it.

[AlexKamaev]

@konqi
In the testcafe repo, TestCafe sends a command to the browser to return storages:
 

testcafe/src/test-run/index.js

Line 588 in 158695b

async getStateSnapshot () {

 
In the hammerhead repo, a browser returns the storages to the server to save them in the role:
 
https://github.com/DevExpress/testcafe-hammerhead/blob/9ee5ebb2e90563b8ab82cc70f608888370e6b475/src/client/sandbox/storages/index.js#L107
 
When a new page is requested, the hammerhead injects a special script to restore the storages from the role on the page:
 
https://github.com/DevExpress/testcafe-hammerhead/blob/master/src/processing/resources/page.js#L118

[AlexKamaev]

@TestAndunR
I've researched the issue and found that it occurs because of the authorization service. The role initializer does not wait for the service response, so localStorage is not saved correctly.
However, while we would certainly like to improve this mechanism in the future, your initial inquiry is not related to the role mechanism directly. In the meantime, I've prepare a better workaround, which is more reliable than using the 'wait' method.

const getLocalStorage = ClientFunction(() => {
    return window.localStorage['userDetails'] || '';
});

const registeredUser = Role('https://sigma.slappforge.com/#/signin', async t => {
    await t
        .typeText(page.nameInput, 'yourEmail')
        .typeText(page.password, 'yourPass')
        .click(page.signin);

    let storageLoaded = false;

    while (!storageLoaded) {
        let localStorage = await getLocalStorage();

        storageLoaded = localStorage.indexOf('yourEmail') >= 0;
    }
}, { preserveUrl: true });