I am writing a protractor test, where I need to read a span/div with id='mylabel' using getText(). I then need to pass the value to an input (id='myinput') using sendKeys().
So, I do this:
var value;
element(by.id('mylabel')).getText().then(function(txt){
value = txt;
element(by.id('myinput')).sendKeys(value);
// do "other protractor tasks" with 'value'.
})
But, is there a way I can avoid the nesting, by asking protractor to perform sendKeys and subsequent actions only after the value variable is set?
The above is a simple case, but I soon find code getting into multiple nesting because of the waiting for promises to be resolved. Also, I observed that protractor does not provide a stacktrace if "other protractor tasks" throws an error due to an error somewhere down the line (it just hangs and times out).
I am using Protractor 2.1.0 and I am working with Angular JS pages.
I am specifically interested to know if it is a known issue to have silent errors in nested tasks with Protractor and is there anyway to solve it?
Protractor handle at least one level of promises without the need of then function. That way you can expect synchronous flow.
If you are looking for event based action like watching a value to update then you can setup something like this:
function waitForTextToUpdate(elm, defaultText, timeout) {
if (typeof(timeout) === 'undefined') {
timeout = 10000;
}
return browser.driver.wait(function() {
return elm.getText().then(function(value) {
return !(value.indexOf(defaultText) > -1);
});
}, timeout, "Expectation error (waitForTextToUpdate): Timed out waiting for element state to change.");
}
Promises are inevitable in protractor. There is no way to avoid handling promises, but if you want to avoid nesting it can be done easily using .then() chaining functionality. Here's an example -
var value = '';
element(by.id('mylabel')).getText()
.then(function(txt){
value = txt;
})
.then(function(){
element(by.id('myinput')).sendKeys(value);
// do "other protractor tasks" with 'value'.
});
There's also an npm package available for this feature. Q npm package. It works similar to the above example but is more extended.
Hope this helps.
Related
I love testing-library, have used it a lot in a React project, and I'm trying to use it in an Angular project now - but I've always struggled with the enormous error output, including the HTML text of the render. Not only is this not usually helpful (I couldn't find an element, here's the HTML where it isn't); but it gets truncated, often before the interesting line if you're running in debug mode.
I simply added it as a library alongside the standard Angular Karma+Jasmine setup.
I'm sure you could say the components I'm testing are too large if the HTML output causes my console window to spool for ages, but I have a lot of integration tests in Protractor, and they are SO SLOW :(.
I would say the best solution would be to use the configure method and pass a custom function for getElementError which does what you want.
You can read about configuration here: https://testing-library.com/docs/dom-testing-library/api-configuration
An example of this might look like:
configure({
getElementError: (message: string, container) => {
const error = new Error(message);
error.name = 'TestingLibraryElementError';
error.stack = null;
return error;
},
});
You can then put this in any single test file or use Jest's setupFiles or setupFilesAfterEnv config options to have it run globally.
I am assuming you running jest with rtl in your project.
I personally wouldn't turn it off as it's there to help us, but everyone has a way so if you have your reasons, then fair enough.
1. If you want to disable errors for a specific test, you can mock the console.error.
it('disable error example', () => {
const errorObject = console.error; //store the state of the object
console.error = jest.fn(); // mock the object
// code
//assertion (expect)
console.error = errorObject; // assign it back so you can use it in the next test
});
2. If you want to silence it for all the test, you could use the jest --silent CLI option. Check the docs
The above might even disable the DOM printing that is done by rtl, I am not sure as I haven't tried this, but if you look at the docs I linked, it says
"Prevent tests from printing messages through the console."
Now you almost certainly have everything disabled except the DOM recommendations if the above doesn't work. On that case you might look into react-testing-library's source code and find out what is used for those print statements. Is it a console.log? is it a console.warn? When you got that, just mock it out like option 1 above.
UPDATE
After some digging, I found out that all testing-library DOM printing is built on prettyDOM();
While prettyDOM() can't be disabled you can limit the number of lines to 0, and that would just give you the error message and three dots ... below the message.
Here is an example printout, I messed around with:
TestingLibraryElementError: Unable to find an element with the text: Hello ther. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
...
All you need to do is to pass in an environment variable before executing your test suite, so for example with an npm script it would look like:
DEBUG_PRINT_LIMIT=0 npm run test
Here is the doc
UPDATE 2:
As per the OP's FR on github this can also be achieved without injecting in a global variable to limit the PrettyDOM line output (in case if it's used elsewhere). The getElementError config option need to be changed:
dom-testing-library/src/config.js
// called when getBy* queries fail. (message, container) => Error
getElementError(message, container) {
const error = new Error(
[message, prettyDOM(container)].filter(Boolean).join('\n\n'),
)
error.name = 'TestingLibraryElementError'
return error
},
The callstack can also be removed
You can change how the message is built by setting the DOM testing library message building function with config. In my Angular project I added this to test.js:
configure({
getElementError: (message: string, container) => {
const error = new Error(message);
error.name = 'TestingLibraryElementError';
error.stack = null;
return error;
},
});
This was answered here: https://github.com/testing-library/dom-testing-library/issues/773 by https://github.com/wyze.
I have a simple Javascript function that returns an observable to which I have applied the shareReplay operator with parameter 1.
[![export function doStuffWithShareReplay() {
return interval(100).pipe(
shareReplay(1),
tap(d => console.log('do stuff 1', d)),
take(5)
);
}
If I put such function within a mocha test and run it from within VSCode, it seems that the execution of the test never completes and I have to stop the test execution manually. More precisely, the test passes as expected, but the small control pad at the top-center of VScode is not closed and I have to click on the red button to close it, as you can see in the following picture. If I remove shareReplay the execution ends as expected. I am wondering which is the reason of the behavior.
Use publishReplay(1) and refCount() instead of shareReplay(1):
return interval(100).pipe(
publishReplay(1),
refCount(),
...
There's a bug in shareReplay(1) since RxJS 5.5 (that still exists in RxJS 6.1) that prevents it from unsubscribing from its source.
For more details see this issue: https://github.com/ReactiveX/rxjs/issues/3336
I was trying to figure out why .click() below was crashing protractor :
this.clickSecondPanel = function () {
element(by.css('div.panels-gs.panel-top-two-gs')).click();
}
until I changed the line to :
element(by.css('div.panels-gs.panel-top-two-gs')).click;
where my spec.js looks something like :
var DataCardPage = require('./pageObjects/dataCard.page.js');
var dataCardPage = new DataCardPage();
describe('Clicking on the 2nd panel', function () {
dataCardPage.clickSecondPanel();
it('Should select the 2nd test panel', function () {
expect(dataCardPage.getSecondPanelText()).toBe('TEST123');
});
In other places in my code, I use .click() (with parenths), so this is confusing to me.
The error is nasty:
Started
[17:44:23] E/launcher - Error while waiting for Protractor to sync with the page
: "window.angular is undefined. This could be either because this is a non-angu
lar page or because your test involves client-side navigation, which can interfe
re with Protractor's bootstrapping. See http://git.io/v4gXM for details"
Any advice appreciated...
Bob
Solved this in the comments above, posting as an answer.
My suggestion was to try moving the clickSecondPanel() inside the it block. It looked suspicious by itself just from a "best practice" perspective as I do not have any code that is outside of a jasmine function i.e. it, beforeAll, afterAll etc (don't even know where I learned that habit honestly).
It also seemed to effect the control flow and asynchronous execution so the click() event was triggering too soon. This can be explained in part by this documentation and/or this blog post
Try using browser.ignoreSynchronization=true at the begining of your test. May be the application that you are trying to automated does not contain angular in it.
First time I post an issue on SO, I hope I'm doing it right.
it (' :: 2.0 service creation :: should fill out service info tab', function(){
createNewService.setServiceName(e2eConfig.newServiceDetails.basicServiceName);
createNewService.selectCategory();
createNewService.setIntroText(e2eConfig.newServiceDetails.introText);
createNewService.selectParent();
createNewService.uploadIcon();
createNewService.nextTab();
//right now assert will fire off without running the methods above because
//we are still on the infoTab
assert(($(createNewService.selectors.infoTab).isDisplayed()) == true, 'did not move to the next tab');
},20000);
What this test does is it fills the inputs, selects drop-downs where necessary and uploads a file.
The test then attempts to switch to the next tab in the widget.
To determine whether it managed to switch to the next tab I want to make a chai library assertion with a custom message.
with the current code the assert will return true because it sees the infoTab and the test will fail without running any of the methods before the assert
if I change the assert line to look for '!== true', then it's going to run the methods and move on
In any case, would it be better to do this in a different manner or perhaps use expect instead of assert?
Chai assert API
Chai expect API
All Protractor function calls return promises that resolve asynchronously, so if the functions you defined on createNewService are all calling Protractor functions you'll have to wait for them resolve before calling the assert. Try something like the following:
it (' :: 2.0 service creation :: should fill out service info tab', function(done) {
createNewService.setServiceName(e2eConfig.newServiceDetails.basicServiceName);
createNewService.selectCategory();
createNewService.setIntroText(e2eConfig.newServiceDetails.introText);
createNewService.selectParent();
createNewService.uploadIcon();
createNewService.nextTab().then(function() {
assert.eventually.strictEqual($(createNewService.selectors.infoTab).isDisplayed(), true, 'did not move to the next tab');
done();
});
},20000);
A few things to note:
This example assumes that createNewService.nextTab() returns a promise.
You'll need to use a library like chai-as-promised to handle assertions on the values returned from promises. In your code you're asserting that a promise object == true, which is truthy due to coercion.
Since your functions run asynchronously, you'll need to pass a callback to your anonymous function then call it when your test is finished. Information about testing asynchronous code can be found here.
I am using jQuery 1.9.1.
Suppose i have a button with id="clickMe"
My jQuery code is:
$('#clickMe').click(function(event)
{
eventHandler1();//do something
eventHandler2();//use output from eventHandler1() and do something
}
Now, i want "eventHandler2" to be executed at last so that i could use the output of "eventHandler1". Is there any way to do this manually and not just the way i have put the handlers inside the click event?
One more thing, "eventHandler1()" and "eventHandler2()" are present in different .js files and thus the requirement.
jQuery.when() provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.
For example, when the Deferreds are jQuery.ajax() requests, the arguments will be the jqXHR objects for the requests, in the order they were given in the argument list.
$.when(eventHandler1).then(eventHandler2).done(function(){
alert('done.');
});
So can even use GLOBAL variable to store eventHandler1 output and access that inside eventHandler2
Example
var someVar;
function eventHandler1()
{
// process
someVar = some value from process
return someVar;
}
function eventHandler2()
{
alert(someVar);
}
Response to OP comment
as you have asked about execute handler in queue you can use Jai answer.
you can use .when .then and .done as below.
$.when(eventHandler1).then(eventHandler2).done(function(){
//process code
});