CODEWITHSUNDEEP
javascripttestingautomated-testse2e-testingtestcafe
Soumya
Soumya

Reputation: 1

how to work with list of elements in page object model

In the below code snippet, how can I use osList and featureList using typescript can you please help me with this. I need to know how to work with a list of elements in the page object model like submitName function.

import { Selector, t } from 'testcafe';

const label = Selector('label');

class Feature {
constructor (text) {
this.label = label.withText(text);
this.checkbox = this.label.find('input[type=checkbox]');
}
}

class OperatingSystem {
constructor (text) {
this.label = label.withText(text);
this.radioButton = this.label.find('input[type=radio]');
}
}

export default class Page {
constructor () {
this.nameInput = Selector('#developer-name');
this.triedTestCafeCheckbox = Selector('#tried-test-cafe');
this.populateButton = Selector('#populate');
this.submitButton = Selector('#submit-button');
this.results = Selector('.result-content');
this.commentsTextArea = Selector('#comments');

    this.featureList = [
        new Feature('Support for testing on remote devices'),
        new Feature('Re-using existing JavaScript code for testing'),
        new Feature('Running tests in background and/or in parallel in multiple browsers'),
        new Feature('Easy embedding into a Continuous integration system'),
        new Feature('Advanced traffic and markup analysis')
    ];

    this.osList = [
        new OperatingSystem('Windows'),
        new OperatingSystem('MacOS'),
        new OperatingSystem('Linux')
    ];

    this.slider = {
        handle: Selector('.ui-slider-handle'),
        tick:   Selector('.slider-value')
    };

    this.interfaceSelect       = Selector('#preferred-interface');
    this.interfaceSelectOption = this.interfaceSelect.find('option');
    this.submitButton          = Selector('#submit-button');
}

async submitName (name) {
    await t
        .typeText(this.nameInput, name)
        .click(this.submitButton);
}
}

Upvotes: 0

Views: 456

Answers (1)

Helen Dikareva
Helen Dikareva

Reputation: 1036

I can describe this to you based on the TestCafe's basic example. First, you need to change the page-model file extension to ts and create this file according to the TypeScript rules (for example, see my gist). Then, you can change the test file extension to ts and start test execution like you do it for any js tests, e. g. testcafe chrome test.ts.

Upvotes: 4

Related Questions