时间戳

首页 > 解决方案 > 在 js 中创建自定义的一组定义的链接方法

javascript - 在 js 中创建自定义的一组定义的链接方法

问题描述

该问题与一般的 js 编程有关，但我将使用 nightwatch.js 作为示例来详细说明我的查询。

NightWatch JS 为其浏览器组件提供了各种链接方法，例如：-

 browser
    .setValue('input[name='email']','example@mail.com')
    .setValue('input[name='password']', '123456')
    .click('#submitButton')

但是，如果我正在编写从下拉列表中选择选项的方法，则需要多个步骤，并且如果表单中有多个下拉列表，它会变得非常混乱，例如：-

 browser
    .click(`#country`)
    .waitForElementVisible(`#india`)
    .click(`#india`)
    .click(`#state`)
    .waitForElementVisible(`#delhi`)
    .click(`#delhi`)

是否可以创建自定义链接方法来对这些已定义的方法进行分组？例如：

/* custom method */
const dropdownSelector = (id, value) {
    return this
        .click(`${id}`).
        .waitForElementVisible(`${value}`)
        .click(`${value}`)
} 

/* So it can be used as a chaining method */
browser
    .dropdownSelector('country', 'india')
    .dropdownSelector('state', 'delhi')

或者有没有其他方法可以解决我增加代码的可重用性和可读性的问题？

标签： javascriptreactjsmethod-chainingnightwatch

解决方案

我对 JS 有点陌生，所以无法告诉你一个理想的代码解决方案，不得不承认我不知道在这种情况下代理是什么。但是在 Nightwatch 和测试自动化的世界中，我通常会将我计划重用的多个步骤包装到页面对象中。在 pageObject 文件夹中创建一个新文件，并用您要重用的方法填充它

所以你的测试...

browser
.click(`#country`)
.waitForElementVisible(`#india`)
.click(`#india`)
.click(`#state`)
.waitForElementVisible(`#delhi`)
.click(`#delhi`)

成为另一个名为“myObject”的文件中的页面对象方法，例如...

selectLocation(browser, country, state, city) {
  browser
    .click(`#country`) <== assume this never changes?
    .waitForElementVisible(country)
    .click(country)
    .click(state)
    .waitForElementVisible(city)
    .click(city);
}

然后您的每个测试都继承该方法并自己定义这些值，但是您选择管理它...

const myObject = require ('<path to the new pageObject file>')

module.exports = {
  'someTest': function (browser) {
    const country = 'something' 
    const state = 'something'
    const city = 'something'

    myObject.selectLocation(browser);

您还可以将您的国家/州/城市设置为全局文件中的变量，并将它们设置为对所有内容都相同，但我不知道您想要多细化。

希望这有点道理:)

推荐阅读