If i don't use Role, few test dont have localstorage that I set before and the test fails

Question

I'm testing a page that has an external third-party login (onelogin), the first problem with the test was that this login has MFA, I found an alternative to create valid local storage and set it up in the browser, my first test was running and working, but adding more and more test, I start to see that some tests start to fail, and randomly a test fail, can pass and sometimes can fail, when I start to print the local storage value after setting it up and navigating to the page, the key asked was returning null for this flasky test. I didn't use Role in my test, but after reading some similar issues, I decide to use role I added a dummy Role and it stated to work, I don't have any test that fails anymore, I'm not sure why start to work only adding the t.useRole(userrole), and I will like to know why before adopt it.

Test.ts

const setup = async (t) => {
await t.useRole(userRole);
await authenticationServices.authenticateFeeUIWithRole();
await t.navigateTo(somethingPage.somethingtUrl);}

const userRole = Role(somethingPage.somethingtUrl, async t => {});


fixture('Creating somethings')
.meta('regression', 'true')
.page(somethingPage.somethingtUrl)
.beforeEach(setup);

test('Creating something', async (t) => {
const something= 'something';
console.log(somethingname+' ***********');
console.log(await authenticationServices.getLocalStorageSet(process.env.LOCALSTORAGEKEY));
await somethingPage.clickCreateSomethingButton();)}

AuthenticationService.ts

public async authenticateSomethingUI() {
    const {access_token}= await this.authenticationIdpClient.getFeesToken();
    const {local_storage_key, local_storage_value} = Configuration.getLocalStorage(access_token);
    await this.localStorageSet(local_storage_key, local_storage_value);

};

private localStorageSet = ClientFunction((key, value) => localStorage.setItem(key, value));

Edit 2 (Aswering Alex) Hi Alex thanks for answering, I didn't use it before UserRole because I have only one 'Role' and my 'login' logic is, asking for a token, build an object, and put it in the local storage, that is the reason why I used an 'authentication services' that set the local storage and were invisible for the tests. Why I have an empty role, is because if I move the 'auth services' to inside the Role and t.navigate again to the page, only the first test work, and all the other ones fail.

const setup = async (t) => {
await t.useRole(userRole);};

const userRole = Role(feeListPage.feeListUrl, async t => {
await authenticationServices.authenticateFeeUIWithRole();
await t.navigateTo(feeListPage.feeListUrl);});

fixture('Creating functions fee')
.meta('regression', 'true')
.page(feeListPage.feeListUrl)
.beforeEach(setup);
test({});
test({});
test({});

The only way that all the test pass is like this

const setup = async (t) => {
await t.useRole(userRole);
await authenticationServices.authenticateFeeUIWithRole();
await t.navigateTo(feeListPage.feeListUrl);
};

const userRole = Role(feeListPage.feeListUrl, async t => {
});

null localstorage in second test, 3 retry

Initialize Role and authenticate after, not sure why I can not auth inside of the Role

Answer 1

Your approach with roles is correct. It's unclear why sometimes your tests passed without using roles. I believe that it is only the first test that should work without roles; other tests should fail. Let me explain it in detail. By default, every test starts with clear cookies and clear localStorage. This means that all changes in cookies/storage you made in a test will not have affect in the next test. When using a role, you can preserve the cookie/storage state for further use. I believe this is exactly what you need. Please let me know if I am wrong or misunderstand something in your scenario.

I also examined your code and I see that in the following line your role initializer function is empty:

const userRole = Role(somethingPage.somethingtUrl, async t => {});

Please take a look at the following guide to see some examples of using the Roles mechanism: https://testcafe.io/documentation/402845/guides/advanced-guides/authentication