Wait for the item to change its value (text)

Question

I am on the third day working with the Transporter, and I constantly click on the bric wall to wait for the pages to load and the elements to appear. This test case, in particular, became ugly, and I would like to solve problems without relying on sleep.

I am now "outside the land of AngularJS"

it('it should reflect in both the field and the title when the personnel name is changed', function() { var inputField, personnelHeader, personnelName; personnelName = element(By.css(".overlay.editnameoverlay")).click(); personnelHeader = element(By.id("personnel_name_header")); inputField = element(By.css("input[name='newvalue']")); inputField.clear(); inputField.sendKeys("Test 123"); element(By.css("input[name='ok_button']")).click(); // browser.driver.sleep(2000); This test only works with this sleep added browser.wait(function() { console.log("Waiting for header to change..."); return personnelHeader.getText().then(function(text) { return text === "Test 123"; }); }, 5000); return expect(personnelHeader.getText()).toBe(personnelName.getText()); }); 

So, here the test changes the name in the input field. sends it and waits for changes to be reflected in the modal header. The problem is that without the browser .driver.sleep (2000) I get an error

 Stacktrace: StaleElementReferenceError: stale element reference: element is not attached to the page document 

How do I solve this in this particular case?

Answer 1

From the documentation for Expect Conditions :

 var EC = protractor.ExpectedConditions; // Waits for the element with id 'abc' to contain the text 'foo'. browser.wait(EC.textToBePresentInElement($('#abc'), 'foo'), 5000); 

Answer 2

When you use Protractor to test pages without angular, you yourself expect the elements to be ready for interaction.

StaleElementReferenceError is probably the most useless mistake of selenium, this happens when an element is removed from the DOM, but still cached somehow, I also suffered this problem when I started with Protractor, and even tried to convince it should be automatically repeated with using the Protractor-side.

The solution for me is to always explicitly expect the element to appear on the page using the user-defined function waitReady() , which browser.wait is ready for the elements, i.e.: expects the element to be ready for interaction:

  expect($('#login_field').waitReady()).toBeTruthy(); 

Integrate this piece of code first: https://gist.github.com/elgalu/2939aad2b2e31418c1bb

Not only waitReady() user waitReady() wait for the element, but it also swallows any unrelated useless webdriver error, such as StaleElementReferenceError , and will simply retry until it finds the element or it closes.

So waitReady() each element before the interaction, i.e. to clear() or sendKeys() or click() ...

 // TODO: Move to Page Objects module var personnelNameElm = $(".overlay.editnameoverlay"); var personnelHeaderElm = $("#personnel_name_header"); var inputFieldElm = $("input[name='newvalue']"); var okBtnElm = $("input[name='ok_button']"); it('it should reflect in both the field and the title when the ' + 'personnel name is changed', function() { expect(personnelNameElm.waitReady()).toBeTruthy(); personnelNameElm.click(); expect(inputFieldElm.waitReady()).toBeTruthy(); inputFieldElm.clear().sendKeys("Test 123"); expect(okBtnElm.waitReady()).toBeTruthy(); okBtnElm.click(); browser.wait(function() { console.log("Waiting for header to change..."); // Using waitReady() before getText() avoids Stale element errors return personnelHeaderElm.waitReady().then(function() { return personnelHeaderElm.getText().then(function(text) { return text === "Test 123"; }); }); }, 5000); expect(personnelHeaderElm.getText()).toEqual(personnelNameElm.getText()); });