TestCafe: Page Object Model - accessing all the instantiated objects with a common single reference

Question

Page model-

import { Selector } from 'testcafe';

export default class Page {
    constructor () {
        this.nameInput = Selector('#developer-name');
    }
}

Page model2-

import { Selector } from 'testcafe';

export default class Page2 {
    constructor () {
        this.nameInput2 = Selector('#tester-name');
    }
}

common spec to instantiate the above-

import Page from './page-model';
import Page2 from './page-model2';

const page = new Page();
const page2 = new Page2();

can we have a single file\spec to instantiate above two Pages and then access all Selectors across Pages from a single reference variable?

Alex Skorkin · Accepted Answer · 2021-02-24 15:07:45Z

2

If you don't want to create new instances of page models in each test, you can export them directly in model.js:

test.js

import { pageOne, pageTwo } from './model';

fixture `fixture 1`
    .page `http://example.com`;

test(`test`, async t => {
    await t
    .click(pageOne.el1)
    
    //...navigation to page two
    
    .click(pageTwo.el2);
});

model.js

import { Selector } from 'testcafe';

class PageOne {
    constructor () {
        this.el1 = Selector('#el1');
        //....
    }
}

class PageTwo {
    constructor () {
        this.el2 = Selector('#el2');
        //....
    }
}

export const pageOne = new PageOne();
export const pageTwo = new PageTwo();

UPDATE

Also you can organize all selectors in a separate module as follows:

test.js

import selectors from './selectors';

fixture `fixture 1`
    .page `http://example.com`;

test(`test`, async t => {
    await t
    .click(selectors.el1)
    .click(selectors.el2);
});

selectors.js

import { Selector } from 'testcafe';

export default {
    el1: Selector('#el1'),
    el2: Selector('#el2'),
    //....
}

edited Feb 24, 2021 at 15:07

Alex Skorkin

4,2743 gold badges27 silver badges48 bronze badges

answered Nov 30, 2018 at 12:30

Vladimir A.

2,2222 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

haridurgempudi Over a year ago

Thanks for the response. But I am looking to have a common reference spec where in i only need to import one function and access the Selectors across multiple files\pages. something like this in below- I am not sure if TestCafe allow us to achieve this? ' import { commonSelectorSpec } from './model'; fixture fixture 1 .page http://example.com; test(test, async t => { await t .click(commonSelectorSpec.el1) //...navigation to page two .click(commonSelectorSpec.el2); }); '

Vladimir A. Over a year ago

Thanks for the clarification. See the updated answer above.

haridurgempudi Over a year ago

Thanks for the response. On top of this can u please suggest how to do it for one more separate page containing the Selectors?

Collectives™ on Stack Overflow

TestCafe: Page Object Model - accessing all the instantiated objects with a common single reference

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related