E2e transporter when refreshing a page after clicking with the latest data

Question

I am a pretty new e2e protractor test. The page under testing is a page without angular (knockout). Test case as follows

The page has a kendo grid load with default data. but when you click on a flag on it, some other data is loaded.

I would like to test the scenario when the grid is reloaded with new data.

browser.wait(element(by.id('some-element')).isPresent)not suitable as this element already exists when it has default data. I use browser.driver.sleep(2000)to wait for the page to reload after clicking the button. But I'm sure this clear expectation is not a good idea, can anyone help with this? Any template offered in this case. Any help on this is much appreciated

Answer 1

Since there is new data loaded into the grid, we can find the existing row in the grid, check the box and make sure that the previously located row is now "out of date":

var EC = protractor.ExpectedConditions;
var existingRow = element(by.css("#mygrid tr"));

checkbox.click();

browser.wait(EC.stalenessOf(existingRow), 5000);

---

Another approach might be to wait for the number of rows in the grid to change:

element.all(by.css("#mygrid tr")).count().then(function (countBefore) {
    checkbox.click();

    browser.wait(function () {
        return element.all(by.css("#mygrid tr")).count().then(function (countAfter) {
            return countBefore !== countAfter;
        });
    }, 5000);
});

Answer 2

Sorry, I forgot that you said that this page is not angular.

So, there is another set of expectations, mostly inherited directly from webdriver: https://github.com/sakshisingla/Protractor-Non-Angular-Tests/wiki/Creating-test-scripts-using-Protractor-for-non-angular- application : So something like this should work:

browser.driver.wait(function() {
     return browser.driver.findElement(by.id('some-element'))
              .then(function(elem) {
                <Your test code>
                return true;
              });
  }, 2000);