Protractor end-to-end testing: Verifying page refresh functionality after clicking, with updated data

As a relatively new protractor e2e testing user, I am facing a challenge with testing a non-angular (knockout) page. The specific test case involves a kendo grid that initially loads with default data, but when a checkbox is clicked, it should reload with different data.

My goal is to test the scenario where the grid successfully reloads with the new data after the checkbox click.

I have tried using 

browser.wait(element(by.id('some-element')).isPresent)
, but this element already exists when the grid has the default data. As a workaround, I have used browser.driver.sleep(2000) to allow time for the page to reload after the checkbox click. However, I realize that this explicit wait approach is not ideal. Can anyone provide guidance or suggest a better pattern for handling this situation? Any assistance would be greatly appreciated.

javascriptselenium-webdriverjasmineprotractor

Answer №1

With the new grid data loaded, one method is to find the current row in the grid, select the checkbox, and confirm that the row has been updated:

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

checkbox.click();

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

Alternatively, you can monitor the change in row count within the grid:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accessing the statusText of a 403 response in Axios (React, Express, Node.js)

Within my component, there is a register function that makes an API call. The API checks if the email already exists and provides an appropriate status and statusText based on the result. Below is the API call handler in my Express app: router.post(' ...

javascriptnode.jsreactjsexpressaxios

Ways to set values for an array of objects containing identical key names

let people = [ { firstName: 'Ben' }, {firstName : 'Bob' } ]; let location = { city: 'Dublin' , Country: 'Ireland' } ; let result = []; let tempObj = {}; for(let person of people){ tempObj = Object.assign({}, ...

javascripttypescript

Creating a unique, random output while maintaining a log of previous results

While working on a recent project, I found myself in need of a custom Javascript function that could generate random numbers within a specified range without any repetitions until all possibilities were exhausted. Since such a function didn't already ...

javascriptjqueryrandom

Unusual actions exhibited by the jQuery inputs

My form has input fields where jQuery turns a specific input (the URL input) into a link. However, I have two URL inputs with HTML IDs url0 and url1. The issue arises when editing the first input (url0), as the second input (url1) becomes visible and any c ...

javascriptjquery

Verify if the loading spinner is currently visible on the tab

I've included a download button on my website for users to easily download a file. When the user clicks on the button, the page begins loading, as indicated by the tab: https://i.sstatic.net/9DkM8.png Is there a way to determine the state of this p ...

javascriptjqueryhtml

The Chrome Keyboard on Android seamlessly passes words to the next input field when the focus changes in JavaScript

When using two input fields, pressing the enter key on the first field in Chrome (49) on Android (6.0.1) carries over the last word typed to the new input due to the right-bottom button on the standard keyboard. Is there a way to prevent this behavior or a ...

javascriptandroidhtmlgoogle-chrome

Vue.js version 3 presents an issue where the reactivity of a `v-model` is lost when the `data()` function is transformed into `

Exploring this simple example, we have an input and a p element that displays the input value: const App = { data() { return { message: "hello world!" }; } }; Vue.createApp(App).mount('#root'); <script src="https://un ...

javascriptvue.jsvue-componentvuejs3vue-composition-api

What is the process for authenticating and sending a click conversion to Google Ads using a service account and the REST API with TypeScript?

I have attempted to authenticate using this documentation and to send conversions via REST API using this REST endpoint due to the absence of a Typescript/Javascript Client Library. However, I am encountering authentication issues. Once resolved, I aim to ...

javascripttypescriptgoogle-cloud-platformgoogle-ads-api

Unable to modify the content of a table cell after triggering a Bootstrap modal event

Looking to update values in rows of a table? Here is an example table: https://i.sstatic.net/6l4f3.png I need to update the title per selected row. After selecting the first row, changing the value works fine. However, when I choose the second row, the ...

javascriptphpjquerytwitter-bootstrap

An object is not defined in the following scenario

I currently have a custom function that includes the following code snippet: 1: var object = get_resource($scope, CbgenRestangular, $stateParams.scheme_id); 2: console.log(object) This function triggers the following code: get_resource = function ($sc ...

javascriptangularjs

Refresh your textarea content using the replace method in jQuery

My goal is to extract and manipulate specific values within a user-entered code using jQuery. The code includes custom tags called setting, which I want to extract and display in input fields for easy editing. I have successfully retrieved and displayed th ...

javascriptjqueryhtmlcssxml

How can we convert milliseconds to the corresponding date and time zone in Java?

1)I am trying to determine the user's timezone and current time using the following code snippets: Calendar currentdate1 = Calendar.getInstance(); TimeZone tz = Calendar.getInstance().getTimeZone(); System.out.println("time zone"+tz); System.out.pri ...

javajavascriptjqueryajaxjakarta-ee

Access Denied: Could not open the file '/Users/user-name/.config/postcssrc' due to EACCES error

While attempting to run a project locally using npm run serve, I encountered an error related to postcss with no apparent solution. The situation involves transferring project files from one project to another, where the original project does not present ...

javascriptvue.jsnpmpostcss

Hide Address with Jquery Dialog Box

How can I securely redirect a user to another page within the same website? In my specific situation, I have a form where users input information. For cancellations, they should have options available. When a user clicks the cancellation button, a dialog ...

javascriptjqueryjquery-mobile

Skipping validation while navigating back on SmartWizardIf you need to bypass validation during backward

Looking for assistance with Jquery smartwizard? Check out the link. I want to disable validation when a user clicks on the "Previous" button in any step, except for the first step where the Previous button is disabled by default. Below is my JavaScript co ...

javascriptphpjquerysmart-wizard

Transferring sizable JavaScript array to the Web API

I've been grappling with this problem for two days... In my JavaScript code, I have a large array comprising 20,000 rows and 41 columns. This data was initially fetched in JavaScript via an ajax call, as shown below: var dataArray = []; var dataRequ ...

javascriptjqueryajaxasp.net-web-apixmlhttprequest

Alignment issue with ThreeJS Collada file

I'm currently diving into the world of ThreeJS and I am experimenting with loading collada files into a viewer. My journey began by replicating the code from the Elf colladaLoader demo. I successfully managed to display the model inside an 800px squa ...

javascriptthree.jscollada

What is the reason behind the success of chaining $q.when and $q.reject in Angular.js?

Why does this code not trigger the error callback when using $q in Angular.js: $q.when("test") .then($q.reject("error")) .then( function(v) { $scope.result = "Success: " + v; }, function(e) { $scope.result = "Failure: " ...

javascriptangularjsangular-promise

Retrieving data from router in Angular

I have been working on a web application using Angular, and I have implemented a fixed header in the index.html file. The header appears on every page, with content injected through a ui-view. However, I now want to display this header only after the user ...

javascripthtmlangularjsangular-ui-router

What strategies can I employ to address this historical issue?

Encountered TypeError: (0 , history_history__WEBPACK_IMPORTED_MODULE_6_.default) is not a function This issue arises in my history.js file import { createBrowserHistory } from 'history'; export default createBrowserHistory({ forceRefresh: tr ...

javascriptreactjsreact-routerreact-router-dom