Testcafe - Test multiple pages

Question

I'm testing a website with a login page and then other pages only visible after login.

I created a login_page.js model as follows:

// my_login_page_model.js
import { Selector, t } from 'testcafe';

export default class LoginPage {
  constructor () {
    this.email = Selector('#email');
    this.password = Selector('#password');
    this.signin = Selector('#signinButton');
  }
}

and then I created similar page models for the pages after login.

On my test file, I then instantiate a login page object, run the login page test

// my_test_spec.js
test('login in', async t => {
  await t
    .typeText(loginPage.email, config.name)
    .typeText(loginPage.password, config.password)
    .click(loginPage.signin);
  await t.expect(getURL()).contains(pageUrl);
});

test('second test', async t => {
console.log('Creating a new experience');
  await t
    .click(// click a button on the following page);
});

The problem is the second test starts from the login page and of course, it fails because it can't find the ids of the page after login.

How can this be done?

Answer 1

Every test starts from the scratch and that means clean profile, that why you are not authorized, when second test starts. The simplest way to fix is to move you login code at the beginning of your second test. However, it's not good practice, because you probably need authorization before majority of your test. To solve this, you can choose one of this:

1) Http Auth for some cases

2) Roles

3) Use beforeEach Hook . Just put Login code to this hook and it's will execute before every test in fixture.