Nightwatch.js 高效元素选择器管理：告别重复定位

browser
  .waitForElementVisible('selector', 10000)
  .click('THE SAME selector');

Cy
  .get('element')
  .should('be.visible')
  .click();

// 定义一个常量来存储GitHub按钮的选择器
const githubButton = 'a[aria-label="Nightwatch on Github"]';

describe('Nightwatch.js 元素选择器复用示例', function() {
  // 在所有测试用例运行前导航到指定URL
  before(browser => browser.navigateTo('https://nightwatchjs.org/'));

  // 在所有测试用例运行后关闭浏览器
  after(browser => browser.end());

  it('点击GitHub按钮并验证', function (browser) {
    browser
      // 使用变量进行点击操作
      .click(githubButton)
      // 可以添加其他操作，例如验证页面URL是否跳转到GitHub
      .assert.urlContains('github.com/nightwatchjs/nightwatch');
  });

  it('再次验证GitHub按钮是否存在', function(browser) {
    browser
      // 即使是不同的测试用例，也可以复用同一个变量
      .assert.elementPresent(githubButton);
  });
});

// pages/homePage.js
const homePageCommands = {
  /**
   * 点击GitHub按钮
   * @returns {object} 返回当前Page Object实例，以便链式调用
   */
  clickGithubButton() {
    return this.click('@githubButton');
  },

  /**
   * 验证当前URL是否包含GitHub
   * @returns {object} 返回当前Page Object实例
   */
  assertUrlIsGithub() {
    return this.assert.urlContains('github.com/nightwatchjs/nightwatch');
  }
};

module.exports = {
  url: 'https://nightwatchjs.org/', // 定义页面URL
  commands: [homePageCommands], // 注册自定义命令
  elements: {
    githubButton: {
      selector: 'a[aria-label="Nightwatch on Github"]', // 定义元素选择器
      locateStrategy: 'css selector' // 可选，默认就是css selector
    },
    // 可以定义更多页面元素
    searchBar: '#search-input',
    submitButton: 'button[type="submit"]'
  }
};

// tests/githubTest.js
describe('使用Page Object测试GitHub链接', function() {
  // 声明使用homePage Page Object
  const homePage = browser.page.homePage();

  before(browser => homePage.navigate()); // 导航到Page Object定义的URL

  after(browser => browser.end());

  it('通过Page Object点击GitHub按钮并验证', function (browser) {
    homePage
      .clickGithubButton() // 调用Page Object中定义的方法
      .assertUrlIsGithub(); // 调用Page Object中定义的断言方法
  });
});