Nutmeg Pumpkin Macchiato

    @cucumber-e2e/po

    0.9.2 • Public • Published

    Page Objects

    Page Map

    Page map is collection of defined pages which will be used in State object to easy switch beetween pages.

    const PageMap = require("@cucumber-e2e").PageMap;
    const LoginPage = require("./LoginPage");
    
    /**
    * To define your own map just extend and apply page map on state object
    **/
    class CustomPageMap extends PageMap {
        constructor() {
            super();
            /**
            * methods pass alias to get page, RegExp that defines URL of page and object of Page
            **/
            this.definePage("Login", "^.+$", new LoginPage());
        }
    }

    Methods

    • definePage
    param mandatory description
    alias M alias of the page
    regexp M regexp of URL to determine page
    page M page object

    To use page map call setPageMap method of State class. Prepare hooks is a good place to do that.

    onPrepare: () => {
        State.setPageMap(new PageMap());
    }

    Set new page.

    State.setPage("YourName");

    Get page. Returns one which was set.

    const page = State.getPage();

    Page

    PO model supports both Protractor and WebdriverIO.

    /**
    * Recommended to define base page extended from AbstractPage
    **/
    const ProtractorPage = require("@cucumber-e2e/po").ProtractorPage;
    const WebdriverIOPage = require("@cucumber-e2e/po").WebdriverIOPage;
    const SeleniumPage = require("@cucumber-e2e/po").SeleniumPage;
    const CustomComponent = require("./CustomComponent");
    
    class CustomPage extends ProtractorPage {
        constructor() {
            super();
            this.defineComponent({alias: "Custom Component", component: new CustomComponent()});
            // default selectorType is css
            this.defineElement({alias: "Custom Element", selector: "h3"});
            this.defineElement({
                alias: "CSS Containing Text Custom Element",
                selectorType: "cssContainingText",
                selector: "h3",
                text: "Your Text"
            });
            this.defineCollection({alias: "Custom Collection", selector: "h3.button"});
            this.defineCollection({
                alias: "XPath Custom Collection",
                selectorType: "xpath",
                selector: "//div/input"
            });
        }
    }
    
    //Instance of Selenium page require setting webdriver instance before calling getElement method
    State.getPage().setDriver(yourDriver);
    const page = new CustomPage().setDriver(yourDriver);

    To get element from page call getElement method with alias of provided element.

    const page = State.getPage();
    const element = page.getElement("Simple Element"); //get single element or collection
    
    const elementOfComponent = page.getElement("Component > Element"); //get element or collection of component
    
    const elementOfCollection = page.getElement("#1 of Collection"); //get element of collection by index
    
    const firstElementOfCollection = page.getElement("#FIRST of Collection"); //get element of collection by index
    
    const lastElementOfCollection = page.getElement("#LAST of Collection"); //get element of collection by index
    
    const partOfCollection = page.getElement("#2-3 of Collection"); //get part of collection by start index and end index
    
    const partOfByStartIndexCollection = page.getElement("#>2 of Collection"); //get part of collection by start index
    
    const partOfByEndIndexCollection = page.getElement("#<4 of Collection"); //get part of collection by end index
    
    //get element of collection by text (only visible text supported for webdriverIO)
    const elementOfCollectionByText = page.getElement("#Text in Collection");
    
    //get element of collection by exact text (only visible text supported for webdriverIO)
    const elementOfCollectionByExactText = page.getElement("@Text in Collection");
    
    //get element of collection by regexp text (only visible text supported for webdriverIO)
    const elementOfCollectionByRegexp = page.getElement("/endwith$/ in Collection");
    
    //get subset of collection by text (only visible text supported for webdriverIO)
    const subsetOfCollectionByText = page.getElement("all #Text in Collection");
    
    //get subset of collection by exact text (only visible text supported for webdriverIO)
    const subsetOfCollectionByExactText = page.getElement("all @Text in Collection");
    
    //get subset of collection by regexp text (only visible text supported for webdriverIO)
    const subsetOfCollectionByRegexp = page.getElement("all /endwith$/ in Collection");
    
    //work with last iteration result via pseudocomponent this
    const thisOfCollectionByText = page.getElement("all #Text in Collection > #1 of this");

    Component

    class CustomComponent extends Component {
        constructor() {
            super({
                alias: "Your Component",
                selector: "form:nth-child(1)",
                isCollection: false
            });
            this.defineComponent({alias: "Custom Component", component: new CustomComponent()});
            // default selectorType is css
            this.defineElement({alias: "Custom Element", selector: "h3"});
            this.defineElement({
                alias: "CSS Containing Text Custom Element",
                selectorType: "cssContainingText",
                selector: "h3",
                text: "Your Text"
            });
            this.defineCollection({alias: "Custom Collection", selector: "h3.button"});
            this.defineCollection({
                alias: "XPath Custom Collection",
                selectorType: "xpath",
                selector: "//div/input"
            });
        }
    }

    Install

    npm i @cucumber-e2e/po

    DownloadsWeekly Downloads

    44

    Version

    0.9.2

    License

    MIT

    Unpacked Size

    59.4 kB

    Total Files

    20

    Last publish

    Collaborators

    • alexgalichenko