使用 Protractor 设计 POM 框架：页面同步问题

Question

环境和方法：- 量角器：5.1.2 使用 POM 测试两个站点：https://www.angularjs.org/ and https://angular.io/。两个套件：Test1.js 和 Test2.js，配置。 js

设计问题：- 当使用页面对象测试两个不同的站点（简单的按钮点击）时，第一个测试 无法点击按钮，第二个通过（如中给出的）配置文件规范：['./specs/Test1.js','./specs/Test2.js'])。当独立执行时，两个测试都通过了！在第一次测试中未找到元素异常。

文件夹结构： ./pageobjects/Angular.po.js & Angular主页.po.js & CommonUtils.po.js ./specs/Test1.js & Test2.js

文件： Config.js

var HtmlScreenshotReporter = require('protractor-jasmine2-screenshot-reporter');
var reporter = new HtmlScreenshotReporter({        
   pathBuilder: function(currentSpec, suites, browserCapabilities) {
    return browserCapabilities.get('browserName') + '/' + currentSpec.fullName;
   }
});

exports.config = {      
  capabilities: {
    'browserName': 'chrome'
  },

  specs: ['./specs/Test1.js','./specs/Test2.js'],

  jasmineNodeOpts: {
    defaultTimeoutInterval: 30000
  },  

  // Setup the report before any tests start
  beforeLaunch: function() {
    return new Promise(function(resolve){
      reporter.beforeLaunch(resolve);
    });
  },

  // Setup before every test starts
  onPrepare: function () {
    browser.manage().window().maximize();
    browser.manage().timeouts().implicitlyWait(5000);

    // Assign the test reporter to each running instance
    jasmine.getEnv().addReporter(reporter);
    },

  // Close the report after all tests finish
  afterLaunch: function(exitCode) {
    return new Promise(function(resolve){
      reporter.afterLaunch(resolve.bind(this, exitCode));
    });
  }  
};

Angular.po.js

var Angularpage = function() {
      var getStartedBtn = element(by.css('.hero-cta.button-plain.md-button'));  
        this.clickgetStartedBtn = function(button) {
            getStartedBtn.click();
        };          
    };    
    module.exports = Angularpage

Angular首页。po.js

var AngularHomepage = function() {
        var learnBtn = element(by.css('.learn-link'));       
        this.clickLearnBtn = function(button) {
            learnBtn.click();
          };    
    };    
    module.exports = AngularHomepage

CommonUtils.po.js

var CommonUtils = function() {          
        this.get = function(url) {
            browser.get(url,10000);
          }; 
        this.getTitle = function(title) {
            return browser.getTitle();
          };
        this.goBack = function(button) {
            browser.navigate().back();
          };    
    };        
    module.exports = CommonUtils

Test1.js

   //Importing multiple page objects and creating instances
   var commonUtils = require('./../pageobjects/CommonUtils.po.js');
   var utils = new commonUtils();
   utils.get('http://www.angularjs.org');

   var homePage = require('./../pageobjects/angularHomePage.po.js');
   var angularHomepage = new homePage();

   describe('Angularjs homepage tests', function() 
   {
       beforeEach(function() {    
        browser.waitForAngular();
        });  

       //Works with angular and non-angular page
      it('Should click a button and navigate to non-angularpage', function(){       
        angularHomepage.clickLearnBtn();

        //Interacting with non Angular site in between
        //Wait for page to load and verify the url
        browser.ignoreSynchronization = true;   
        browser.driver.wait(function() {
            return browser.driver.getCurrentUrl().then(function(url) {              
                return (/codeschool/).test(url);   
            });
        }); 

        expect(browser.getTitle()).toEqual('AngularJS vs Angular | Code School');       
        utils.goBack();
        browser.ignoreSynchronization = false;      
      });   
});

Test2.js

//Importing multiple page objects and creating instances
   var angularPage = require('./../pageobjects/Angular.po.js');
   var angularpage = new angularPage();

   var commonUtils = require('./../pageobjects/CommonUtils.po.js');
   var commonUtils = new commonUtils();
   commonUtils.get('https://angular.io/');

   describe('Angular IO Page tests', function() 
   {
       beforeEach(function() {
        browser.waitForAngular();
        });  

      it('Should click Get started button and navigate to new page', function() {        
        //Button click
        angularpage.clickgetStartedBtn();   

        //Wait for page to load and verify the url
        browser.wait(function() {
            return browser.driver.getCurrentUrl().then(function(url) {
                return (/latest/).test(url);   
            });
        }); 

        //Verify Page title from common page objects
        commonUtils.getTitle(function(text){
            expect(text).toEqual('One framework. - Angular');           
        });     
      });      
    });

执行错误： NoSuchElementError：使用定位器未找到元素：By（css 选择器，.learn-link）

Answer 1

问题出在这几行

// Test1.js
var utils = new commonUtils();
utils.get('http://www.angularjs.org');

和

// Test2.js
var commonUtils = new commonUtils();
commonUtils.get('https://angular.io/');

您需要将 get 放在 beforeEach() 中。在每个describe之前，beforeEach习惯于"Setup"你的"testenvironment"。（还对其进行了测试以确保它有效 ;-)）

希望对您有所帮助

更新

如果您只想为每个测试加载一次 url (it)，您应该在 describe() 中使用 beforeAll()，您会得到类似这例如你的 Test2.js 文件

//Importing multiple page objects and creating instances
var angularPage = require('./../pageobjects/Angular.po.js');
var angularpage = new angularPage();

var commonUtils = require('./../pageobjects/CommonUtils.po.js');
var commonUtils = new commonUtils();

describe('Angular IO Page tests', function() {
  // Now it is loaded once for all `it`'s
  beforeAll(function() {
    commonUtils.get('https://angular.io/');
  });

  beforeEach(function() {
    browser.waitForAngular();
  });

  it('Should click Get started button and navigate to new page', function() {
    //Button click
    angularpage.clickgetStartedBtn();

    //Wait for page to load and verify the url
    browser.wait(function() {
      return browser.driver.getCurrentUrl().then(function(url) {
        return (/latest/).test(url);
      });
    });

    //Verify Page title from common page objects
    commonUtils.getTitle(function(text) {
      expect(text).toEqual('One framework. - Angular');
    });
  });
});

使用 Protractor 设计 POM 框架：页面同步问题

Designing POM framework with Protractor: page sync issues

pageobjects

protractor