学习 NightWatch - 页面对象

page-objects 页面对象

须在配置文件中配置 `page_objects_path` 属性

该属性值是一个可以包含 多个页面对象文件夹路径 的 字符串数组

属性

url

页面url,若要导航到页面，可使用 页面对象.navigate()

// 通常定义为字符串
{
    url: 'https://baidu.com'
}

// 动态路径
{
    // url = 当前页面路径 + /login
    url: () => this.api.launchUrl + '/login'
}

elements 元素

为页面对象元素交互的灵活性，可定义元素对象，该对象至少需要包含属性，在选择器旁边，可以指定其他属性

{
    // ...
    // ElementName 为自定义的元素名称
    // 使用时通过 "@ElementName" 调用该元素对象
    ElementName: {
        // document.selector() 元素选择器
        selector: '#id',
        // 定位策略
        // 任意取一 默认 css 选择器
        // 切换选择器另一方法
        // browser.useXpath()或 browser.useCss()
        locateStrategy: 
            ` CSS选择器:   "css selector" `
            ` 链接文本选择器:  "link text" `
            ` 部分链接文本选择器:    "partial link text" `
            ` 标签名称: "tag name" `
            ` XPath 选择器:    "xpath" `,
        // 元素索引
        // 默认使用第一个
        index: 0,
        // 发生错误时是否终止测试
        // 用于 waitForElement* API
        abortOnFailure: true,
        // 用于覆盖默认超时时间
        timeout: 0,
        // 重试次数
        retryInterval: 0,
        // 发生错误时是否继续测试
        // 用在click()，getText()等可能会抛出NoSuchElement error（元素不存在）的Api上
        suppressNotFoundErrors: false
    }
    // ...
}

// 选择器不加其他选项时，可直接使用选择器
.click('#id')
// 使用选项则需要包装成对象
.click({selector: '#id'})

sections 部分

在页面下提供了命名空间

提供元素嵌套，在该元素内定义的任何元素都是其后代元素

export default {
    sections: {
        // 使用 browser.page.CurrentFilesName().expect.section("@menu")
        // 使用 browser.page.CurrentFilesName().section.menu.expect.element('@mail')
        menu: {
            selector: '#Menu',
            elements: {
                mail: {
                    selector: '#mail'
                },
                images: {
                    selector: 'img'
                }
            }
        }
    }
}

commands 方法

使用该属性将自定义方法添加到页面对象中

import { EnhancedPageObject } from 'nightwatch'

interface BaiduPage extends EnhancedPageObject
    <typeof BaiduCommands, typeof baiduPage.elements> {}

// 自定义方法
const BaiduCommands = {
    // 点击搜索方法
    // 方法中的 this 就是页面对象
    clickSearch(this: BaiduPage) {
        // 等待元素出现
        return this.waitForElementVisible('@SearchSubmitButton', 3000)
            // 点击元素
            .click('@SearchSubmitButton')
        // 等待元素消失
        // .waitForElementNotVisible('@SearchSubmitButton')
    }
}

// 页面对象
const baiduPage = {
    // ...
    commands: [BaiduCommands]
    // ...
}

实例

// *******************************************************
// test/page-objects 文件夹下
// *******************************************************
// 注意 在使用 browser.page.PageObjects 时
// 对应的 PageObjects 必须和在 page-objects 文件夹下 
// 的对应文件同名 区分大小写!!!

// 导入页面对象模型 和 原型页面对象
import { PageObjectModel, EnhancedPageObject } from 'nightwatch';
// 自定义方法
const BaiduCommands = {
    // 点击搜索方法
    clickSearch(this: BaiduPage) {
        // 等待元素出现
        return this.waitForElementVisible('@SearchSubmitButton', 3000)
            // 点击元素
            .click('@SearchSubmitButton')
        // 等待元素消失
        // .waitForElementNotVisible('@SearchSubmitButton')
    }
}
// 定义页面对象模型
const baiduPage: PageObjectModel = {
    // 页面路径
    url: 'https://baidu.com',
    // 页面方法
    commands: [BaiduCommands],
    // 页面元素 和 sections 二选一
    elements: {
        // 页面元素名称 自定义 使用时在前面加 @
        // '@SearchKeyWordInput'
        SearchKeyWordInput: {
            // 选择器
            selector: '#kw'
        },
        SearchSubmitButton: {
            selector: '#su'
        },
        SearchResultContainer: {
            selector: '#content_left'
        }
    },
    // 页面元素 和 elements 二选一
    sections: {
        body: {
            selector: 'body',
            elements: {
                Logo: 'img'
            },
            sections: {
                searchKeyWordInput: {
                    selector: '#kw'
                },
                SearchSubmitButton: {
                    selector: '#su'
                },
                SearchResultContainer: {
                    selector: '#content_left',
                    elements: {
                        // ...
                    }
                }
            }
        }
    }
}

// 定义 当前页面对象 接口
export interface BaiduPage_1 extends EnhancedPageObject
    <typeof BaiduCommands, typeof baiduPage.elements> {}

// 定义 当前页面对象 接口
export interface BaiduPage_2 extends EnhancedPageObject
    <typeof BaiduCommands, typeof baiduPage.sections> {}

export default baiduPage