Wait for element to change its value(text)

angularjs, javascript, protractor

Solution

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);

Problem

I'm on my third day working with Protractor and I'm constantly hitting bric walls in regards to waiting around for pages to load and elements to appear. This test case in particular has grown ugly and I would like to solve the issues without having to rely on sleeps. I am currently "outside of 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 the test here changes the name in an input field. submits it and waits for the changes to become reflected in the header of the modal. The problem is that without the browser.driver.sleep(2000) I get an error saying ``` Stacktrace: StaleElementReferenceError: stale element reference: element is not attached to the page document ``` How do I go about solving this in this particular case?

Original source