I'm new on protractor, and I'm trying to implement an e2e test. I don't know if this is the right way to do this, but... The page that I want to test is not a full angular page based, so... I'm having some trouble.
我是量角器的新手，我正在尝试实现e2e测试。我不知道这是不是正确的方法，但是…我要测试的页面不是基于全角的页面，所以…我有一些麻烦。
On my first spec I have:
在我的第一个规范中，我有:
describe('should open contact page', function() {
var ptor = protractor.getInstance();
beforeEach(function(){
var Login = require('./util/Login');
new Login(ptor);
});
I have created this Login class, but after login I want to open the contact page, but protractor immediately try to find element before the page is fully loaded.
我已经创建了这个登录类，但是登录后我想打开联系人页面，但是pro拖拉机会在页面完全加载之前立即尝试查找元素。
I've tried to use:
我试着使用:
browser.driver.wait(function() {
expect(browser.findElement(by.xpath("//a[@href='#/contacts']")).isDisplayed());
ptor.findElement(by.xpath("//a[@href='#/contacts']")).click();
});
But it doesn't work... it always try to find the element before the page loads. I tried this one too:
但它不工作…它总是试图在页面加载之前找到元素。我也试过了:
browser.driver.wait(function() {
expect(ptor.isElementPresent(by.xpath("//a[@href='#/contacts']")));
ptor.findElement(by.xpath("//a[@href='#/contacts']")).click();
});
I'm able to do that using browser.sleep(); but I don't think that is a good option. Any idea? On my login class I have:
我可以使用浏览器。sleep();但我认为这不是一个好的选择。任何想法?在登录类中，我有:
ptor.ignoreSynchronization = true;
How can I wait for this @href='#/contacts before protractor tries to click on it?
我如何等待这个@href='#/contacts ='#/contacts然后尝试单击它?
6 个解决方案
#1
23
I had the same problem you were having for the longest time while using protractor. In my e2e test I start in a non angular app, then get into an angular portion, then get back out to a non angular portion. Made things tricky. The key is to understand promises and how they work. Here's some examples of my real world code in a functioning e2e test. Hoping this gives you an idea of how to structure your tests. Probably some bad practice in this code, please feel free to improve upon this, but I know that it works, maybe not the best way.
在使用量角器的时候，我遇到了同样的问题。在e2e测试中，我从一个非角的app开始，然后进入一个角的部分，然后回到一个非角的部分。让事情很棘手。关键是要理解承诺以及它们是如何运作的。下面是我在e2e测试中真实世界代码的一些例子。希望这能让您了解如何组织测试。可能在这段代码中有一些不好的实践，请随意改进，但是我知道它是有效的，也许不是最好的方法。
To get to angular I use
我用角。
var ptor;
var events = require('events');
var eventEmitter = new events.EventEmitter();
var secondClick = require('./second-click');
beforeEach(function () {
browser.driver.get('http://localhost:8080/');
},10000);
it("should start the test", function () {
describe("starting", function () {
it("should find the link and start the test", function(){
var elementToFind = by.linkText('Start'); //what element we are looking for
browser.driver.isElementPresent(elementToFind).then(function(isPresent){
expect(isPresent).toBe(true); //the test, kind of redundant but it helps pass or fail
browser.driver.findElement(elementToFind).then(function(start){
start.click().then(function(){ //once we've found the element and its on the page click it!! :)
ptor = protractor.getInstance(); //pass down protractor and the events to other files so we can emit events
secondClick(eventEmitter, ptor); //this is your callback to keep going on to other actions or test in another file
});
});
});
});
});
},60000);
While in angular this code works
在角度上，这个代码可以工作
describe("type in a message ", function(){
it("should find and type in a random message", function(){
var elementToFind = by.css('form textarea.limited');
browser.driver.isElementPresent(elementToFind).then(function(isPresent){
element(elementToFind).sendKeys(randomSentence).then(function(){
console.log("typed in random message");
continueOn();
});
});
});
},15000);
After exiting angular
退出后角
browser.driver.wait(function(){
console.log("polling for a firstName to appear");
return browser.driver.isElementPresent(by.name('firstName')).then(function(el){
return el === true;
});
}).
then(function(){
somefunctionToExecute()
});
Hope that gives some guidance and helps you out!
希望这能给你一些指导和帮助!
#2
50
Protractor 1.7.0 has also introduced a new feature: Expected Conditions.
pro拖拉机1.7.0也引入了一个新特性:预期条件。
There are several predefined conditions to explicitly wait for. In case you want to wait for an element to become present:
有几个预定义的条件需要显式地等待。如果你想等待一个元素出现:
var EC = protractor.ExpectedConditions;
var e = element(by.id('xyz'));
browser.wait(EC.presenceOf(e), 10000);
expect(e.isPresent()).toBeTruthy();
See also:
参见:
#3
33
I finally find out...
我终于发现……
var waitLoading = by.css('#loading.loader-state-hidden');
browser.wait(function() {
return ptor.isElementPresent(waitLoading);
}, 8000);
expect(ptor.isElementPresent(waitLoading)).toBeTruthy();
var openContact = by.xpath("//a[@href='#/contacts']");
element(openContact).click();
With this protractor could wait for that element until it loading page disappears. Thanks for those who tried to help XD.
使用这个量角器可以等待那个元素，直到它加载页面消失。谢谢那些试图帮助XD的人。
#4
9
browser.driver.wait(function() {
return browser.driver.isElementPresent(by.xpath("//a[@href='#/contacts']"));
});
This works for me too (without the timeout param)..
这对我也适用(没有超时时间限制)。
for more information, see http://angular.github.io/protractor/#/api?view=webdriver.WebDriver.prototype.wait
有关更多信息，请参见http://angular.github.io/protractor/#/api
#5
1
Thanks to answers above, this was my simplified and updated usage
感谢上面的回答，这是我简化和更新的用法
function waitFor (selector) {
return browser.wait(function () {
return browser.isElementPresent(by.css(selector));
}, 50000);
}
#6
0
Have you tried putting the ng-app in the <html> tag (assuming this part of code is under your control)? This solved a lot of initialization timing problems for me.
您是否尝试过将ng-app放在标签中(假设这部分代码在您的控制之下)?这为我解决了很多初始化时间问题。
#1
23
I had the same problem you were having for the longest time while using protractor. In my e2e test I start in a non angular app, then get into an angular portion, then get back out to a non angular portion. Made things tricky. The key is to understand promises and how they work. Here's some examples of my real world code in a functioning e2e test. Hoping this gives you an idea of how to structure your tests. Probably some bad practice in this code, please feel free to improve upon this, but I know that it works, maybe not the best way.
在使用量角器的时候，我遇到了同样的问题。在e2e测试中，我从一个非角的app开始，然后进入一个角的部分，然后回到一个非角的部分。让事情很棘手。关键是要理解承诺以及它们是如何运作的。下面是我在e2e测试中真实世界代码的一些例子。希望这能让您了解如何组织测试。可能在这段代码中有一些不好的实践，请随意改进，但是我知道它是有效的，也许不是最好的方法。
To get to angular I use
我用角。
var ptor;
var events = require('events');
var eventEmitter = new events.EventEmitter();
var secondClick = require('./second-click');
beforeEach(function () {
browser.driver.get('http://localhost:8080/');
},10000);
it("should start the test", function () {
describe("starting", function () {
it("should find the link and start the test", function(){
var elementToFind = by.linkText('Start'); //what element we are looking for
browser.driver.isElementPresent(elementToFind).then(function(isPresent){
expect(isPresent).toBe(true); //the test, kind of redundant but it helps pass or fail
browser.driver.findElement(elementToFind).then(function(start){
start.click().then(function(){ //once we've found the element and its on the page click it!! :)
ptor = protractor.getInstance(); //pass down protractor and the events to other files so we can emit events
secondClick(eventEmitter, ptor); //this is your callback to keep going on to other actions or test in another file
});
});
});
});
});
},60000);
While in angular this code works
在角度上，这个代码可以工作
describe("type in a message ", function(){
it("should find and type in a random message", function(){
var elementToFind = by.css('form textarea.limited');
browser.driver.isElementPresent(elementToFind).then(function(isPresent){
element(elementToFind).sendKeys(randomSentence).then(function(){
console.log("typed in random message");
continueOn();
});
});
});
},15000);
After exiting angular
退出后角
browser.driver.wait(function(){
console.log("polling for a firstName to appear");
return browser.driver.isElementPresent(by.name('firstName')).then(function(el){
return el === true;
});
}).
then(function(){
somefunctionToExecute()
});
Hope that gives some guidance and helps you out!
希望这能给你一些指导和帮助!
#2
50
Protractor 1.7.0 has also introduced a new feature: Expected Conditions.
pro拖拉机1.7.0也引入了一个新特性:预期条件。
There are several predefined conditions to explicitly wait for. In case you want to wait for an element to become present:
有几个预定义的条件需要显式地等待。如果你想等待一个元素出现:
var EC = protractor.ExpectedConditions;
var e = element(by.id('xyz'));
browser.wait(EC.presenceOf(e), 10000);
expect(e.isPresent()).toBeTruthy();
See also:
参见:
#3
33
I finally find out...
我终于发现……
var waitLoading = by.css('#loading.loader-state-hidden');
browser.wait(function() {
return ptor.isElementPresent(waitLoading);
}, 8000);
expect(ptor.isElementPresent(waitLoading)).toBeTruthy();
var openContact = by.xpath("//a[@href='#/contacts']");
element(openContact).click();
With this protractor could wait for that element until it loading page disappears. Thanks for those who tried to help XD.
使用这个量角器可以等待那个元素，直到它加载页面消失。谢谢那些试图帮助XD的人。
#4
9
browser.driver.wait(function() {
return browser.driver.isElementPresent(by.xpath("//a[@href='#/contacts']"));
});
This works for me too (without the timeout param)..
这对我也适用(没有超时时间限制)。
for more information, see http://angular.github.io/protractor/#/api?view=webdriver.WebDriver.prototype.wait
有关更多信息，请参见http://angular.github.io/protractor/#/api
#5
1
Thanks to answers above, this was my simplified and updated usage
感谢上面的回答，这是我简化和更新的用法
function waitFor (selector) {
return browser.wait(function () {
return browser.isElementPresent(by.css(selector));
}, 50000);
}
#6
0
Have you tried putting the ng-app in the <html> tag (assuming this part of code is under your control)? This solved a lot of initialization timing problems for me.
您是否尝试过将ng-app放在标签中(假设这部分代码在您的控制之下)?这为我解决了很多初始化时间问题。