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

时间:2017-05-29 09:39:34

标签: protractor pageobjects

环境与方法: - 量角器:5.1.2 使用 POM 测试两个网站:https://www.angularjs.org/https://angular.io/。两个套件:Test1.js和Test2.js,Config。 JS

设计问题: - 在测试两个不同站点时使用页面对象(单击简单按钮)时,第一次测试无法单击按钮而第二次通过(如配置文件规范中所示:[ ' ./规格/ Test1.js'' ./规格/ Test2.js'])。独立执行时,两个测试都通过!第一次测试中未找到元素异常。

文件夹结构: ./pageobjects/Angular.po.js& AngularHomepage.po.js& CommonUtils.po.js ./specs/Test1.js& amp; 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

AngularHomepage.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:找不到使用locator找到的元素:By(css selector,.learn-link)

1 个答案:

答案 0 :(得分:0)

问题出在这些方面

// 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()中。 beforeEach用于在每个describe之前“设置”您的“测试环境”。 (也测试它确定并且有效; - ))

希望有所帮助

<强>更新

如果您只想为每个测试(it)加载一次网址,那么您应该使用beforeAll()中的describe(),您将获得类似的内容,例如您的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');
    });
  });
});