定义部分

有时定义页面部分很有用。部分执行两个操作

  • 在页面下提供命名空间级别
  • 提供元素级别的嵌套，以便在部分中定义的任何元素都是其父部分在 DOM 中的后代

声明部分

您可以使用 sections 属性创建部分

nightwatch/pages/samplePage.js 
module.exports = {
  sections: {
    menu: {
      selector: '#gb',
      elements: {
        mail: {
          selector: 'a[href*="mail"]'
        },
        images: {
          selector: 'a[href*="imghp"]'
        }
      }
    }
  }
};

在测试中使用部分

您的测试将按如下方式使用它

tests/sampleTest.js 
describe('sample test with page objects', function() {
  it('Test', function (browser) {
    var google = browser.page.google();
    google.expect.section('@menu').to.be.visible;
    

    var menuSection = google.section.menu;
    menuSection.expect.element('@mail').to.be.visible;
    menuSection.expect.element('@images').to.be.visible;
    

    menuSection.click('@mail');
    

    browser.end();
  });
});

请注意，部分上的每个命令和断言（除了 expect 断言）都会返回该部分以进行链接。如果需要，您可以将部分嵌套在其他部分下以创建复杂的 DOM 结构。

嵌套页面对象部分

nightwatch/pages/samplePage.js 
module.exports = {
  sections: {
    menu: {
      selector: '#gb',
      elements: {
        mail: {
          selector: 'a[href*="mail"]'
        },
        images: {
          selector: 'a[href*="imghp"]'
        }
      },
      sections: {
        apps: {
          selector: 'div.gb_pc',
          elements: {
            myAccount: {
              selector: '#gb192'
            },
            googlePlus: {
              selector: '#gb119'
            }
          }
        }
      }
    }
  }
};

在您的测试中使用嵌套部分很简单
tests/sampleTest.js 
describe('sample test with page objects', function() {
  it('Test', function (browser) {
    var google = browser.page.google();
    google.expect.section('@menu').to.be.visible;
    

    var menuSection = google.section.menu;
    var appSection = menuSection.section.apps;
    menuSection.click('@appSection');
    

    appSection.expect.element('@myAccount').to.be.visible;
    appSection.expect.element('@googlePlus').to.be.visible;
    

    browser.end();
  });
});

推荐内容