使用页面对象组织e2e测试

当我们编写e2e测试时，一个共同的模式是使用页面对象。
页面对象通过封装应用程序页面上的元素信息帮助我们使测试变得简洁。

好处

将页面元素的选择器与测试本身隔离开，这样一旦页面结构发生变化，只需要更新PageObject即可，测试部分的代码不用变动。
好的PageObject应该包含以下这些东西：

• load()或get()函数，用来加载页面。
• 页面上所有测试要用到的元素。
• 页面测试需要用到的数据，比如测试表单页面时需要填入的测试数据。
• 共享的测试用例，比如多个测试用例可能都需要用到公用的代码来assert特定的逻辑，那么这个公共逻辑可以作为函数提出来放入PageObject.
• 每个PageObject单独放一个文件，然后每个文件export这个class，
  这样一来，如果其他的PageObject依赖这个页面，可以方便的引入。

不使用页面对象的测试实例

describe('angularjs homepage', function() {
  it('should greet the named user', function() {
    browser.get('http://www.angularjs.org');
    element(by.model('yourName')).sendKeys('Julie');
    var greeting = element(by.binding('yourName'));
    expect(greeting.getText()).toEqual('Hello Julie!');
  });
});

使用页面组织对象的测试实例

• 首先定义一个页面对象

  var AngularHomepage = function() {
  var nameInput = element(by.model('yourName'));
  var greeting = element(by.binding('yourName'));

  this.get = function() {
    browser.get('http://www.angularjs.org');
  };

  this.setName = function(name) {
    nameInput.sendKeys(name);
  };

  this.getGreeting = function() {
    return greeting.getText();
  };
};

• 接下来需要做的就是使用PageObject及其属性来修改测试，但要保证测试的功能本身并不发生改变。

describe('angularjs homepage', function() {
  it('should greet the named user', function() {
    var angularHomepage = new AngularHomepage();
    angularHomepage.get();

    angularHomepage.setName('Julie');

    expect(angularHomepage.getGreeting()).toEqual('Hello Julie!');
  });
});

从上述实例中可以发现，其实在页面对象的定义中，我们不必包含对元素的操作函数，像上述实例，只是在元素上简单的调用.sendkey(xxx)或getText()，没必要将其封装成函数，直接写反而会更加直观，看代码的人也比较容易明白。如下面的例子：

• 定义一个页面对象

  import { element, by, browser } from 'protractor';
  
  export class LoginPage {
    nameInput = element(by.css('.userName'));
    passwordInput = element(by.css('.password'));
    loginContent = element(by.css('sino-login'));
    button = element(by.css('sino-login button'));
    toast = element(by.css('.toast-message'));
  
    get() {
     browser.get('/#/login');
    }
  
  }
  

• 测试

  import { LoginPage } from './login-page';
  
  describe('login', function () {
      let loginPage: LoginPage;
      beforeEach(() => {
        loginPage = new LoginPage();
        loginPage.get();
      });
  
      it('should display "登录失败！" when password and userName are null', () => {
        const loginContentEl = loginPage.loginContent.getText();
  
        expect(loginContentEl).toContain('登录页面');
  
        const userName = loginPage.nameInput.sendKeys('');
        const password = loginPage.passwordInput.sendKeys('');
        const button = loginPage.button;
  
        button.click();
  
        const toastElText = loginPage.toast.getText();
  
        expect(toastElText).toEqual('登录失败！');
      });
  
      it('should show message of login', () => {
  
        const userName = loginPage.nameInput.sendKeys('王佳禾');
        const password = loginPage.passwordInput.sendKeys('1');
        const button = loginPage.button;
  
        button.click();
  
        const toastEl = loginPage.toast.getText();
  
        expect(toastEl).toEqual('登录成功！');
      });
    });