学习 NightWatch - 查找 DOM

查找 DOM 元素

相对定位器

import {NightwatchTests} from 'nightwatch';

const ecosiaTest: NightwatchTests = {
'Demo test ecosia.org': (browser) => {
  const passwordElement = locateWith(By.tagName('input')).below(By.css('input[type=email]'));

  browser
    .navigateTo('https://archive.org/account/login')
    .setValue(passwordElement, 'password')
    .assert.valueEquals('input[type=password]', 'password');
},

export default ecosiaTest;

有以下方法：

• above 在…上面
• below 在…下面
• toRightOf 在…右边
• toLeftOf 在…左边
• near 近的

// 定位 input[type=email] 元素下的 input
locateWith(By.tagName('input')).below(By.css('input[type=email]'))
// 定位 input[type=email] 元素上的 input
locateWith(By.tagName('input')).above(By.css('input[type=email]'))
// 定位 id 为 LoginBtn 的元素右侧的 按钮
locateWith(By.tagName('button')).toRightOf(By.Id('LoginBtn'))
// 定位 id 为 CancelBtn 的元素右侧的 按钮
locateWith(By.tagName('button')).toLeftOf(By.Id('CancelBtn'))
// 定位 类名 logo-container 最近的 img 元素
locateWith(By.tagName('img')).near(By.className('logo-container'))

链接相对定位器

// 定位 id 为 UserLoginForm 
// 右侧的 类名为 form-item 的元素的
// 上面的 类名 为 btn-container 的元素的
// 最近的 button
locateWith(By.tagName('button'))
.near(By.className('btn-container'))
.above(By.className('form-item'))
.toRightOf(By.Id('UserLoginForm'))

使用 Xpath

export default {
     'Default Test': browser => {
        browser
            // 使用 useXpath() 命令即可使用 Xpath 选择器
            .useXpath()
            // 使用 useCss() 切换回 css 选择器
            .useCss()
    },
    'Demo Test': browser => {
        // 两个方法都能使用 xpath
        browser.click({
            selector: '//',
            locateStrategy: 'xpath'
        })

        browser.click('xpath', '//')
    }
}

// 在配置文件中设置始终使用 xpath
{
    // ...
    "use_xpath": true
    // ...
}