score:2
setting a global variable quite often will not work, because of the asynchronous nature of a web app. the docs refer to this as doing a backflip.
the most reliable way to handle this is either with a closure or with an alias.
to access what each cypress command yields you use .then().
cy.get(".muitablebody-root").find("tr").its('length').then(intiallength => {
// code that uses initiallength is nested inside `.then()`
cy.get("#addrowbutton").click();
cy.get(".muitablebody-root").find("tr").should("have.length", intiallength + 1);
})
allows you to separate the code that creates the variable from the code that uses it.
cy.get(".muitablebody-root").find("tr").its('length').as('intiallength');
cy.get("#addrowbutton").click();
// other test code
cy.get('@intiallength').then(intiallength => {
cy.get(".muitablebody-root").find("tr").should("have.length", intiallength + 1);
})
why not a global variable?
using a global variable is anti-pattern because it often creates a race condition between the test code and the queued commands.
by luck, your example will work most times because cy.get("#addrowbutton").click()
is a slow operation.
but if you want to test that the row count has not changed, then using a global variable will fail.
try this
var intiallength = 0;
cy.get('table').find("tr").then((tr) => {
intiallength = tr.length;
})
// test that row count remains the same
cy.get('table').find("tr").should("have.length", intiallength);
// fails because it runs before the variable is set
this is because the test code runs much faster than the .get()
and .find()
commands, which must access the dom.
although the above example is trivial, remember that web apps are inherently asynchronous and backflip tests can easily fail.
score:0
with find()
you can do something like:
var tablelen = 0;
cy.get(".muitablebody-root").find("tr").then((tr) => {
tablelen = tr.length,
})
and then:
cy.get("#addrowbutton").click(); //new tr inserted
cy.get(".muitablebody-root").find("tr").should("have.length", tablelen + 1);
Source: stackoverflow.com
Related Query
- Cypress get length of a table dynamically
- Get Dynamically created table Data in React Row
- How to get React Table Row Data Onclick
- React material ui table can't get element from row
- Get filtered data in component table after executing the filter function on dataSource in ant design
- How to get DataSource length in react-native?
- Want dynamically add table row in react js
- Dynamically mapping an array of objects to table row
- Ant Design - How can i get count of table row after filtering?
- How to retrieve data from the server using fetch get method and show it in a table
- React get values from dynamically added inputs text fields
- Get code coverage from Cypress with babel, nyc and istanbul plugin?
- How to add and remove table rows Dynamically in React.js
- How to get the length of the text inside the React component
- Get table pagination buttons and rows per page to the left on Material UI
- React - ES6 - Dynamically watching the total character length of a textarea
- How to get rid of Table Cells in TableBody?
- Change the color of specific row of bootstrap table dynamically
- How do I dynamically insert html table cell data into a table with dynamic headers in React?
- How to dynamically get state array name React
- Material Table Get and Set Filter Values
- Get SVG icons dynamically in Next.js
- Trying to get data of the row clicked of the table react js
- Add row to existing table dynamically in ReactJS
- ReactJS: Cannot get the length of a string in component state
- React: How could I add a fade out animation on delete on dynamically generated table entries?
- How to get index of clicked dynamically added Component in React and remove it?
- React Dynamically download Components and get data from all child components
- How do I get a react-bootstrap-table2 caption to be above the table instead of below it?
- get asset images dynamically in React.js
More Query from same tag
- Strange stuff with useState, useEffect and fetch
- NextJS '/' to index.js loads nothing
- Trouble passing props to imported component
- React-rails Cannot Find App Component in View
- Moment.js with ReactJS (ES6)
- Cannot use connect function from react-redux
- How can I pass Apollo data and React Router 4 url params to my components
- React sending array of objects as form Data
- How to Map the Buffer TimeRange Data From an HTML5 Video Player Ref to a Progress Bar?
- Can action creator be a class with action methods
- ESIDIR Error in NextJs, even if the code come from the official page
- Testing useQuery hook executed while loading page
- Optimize the function in React. Having setState key as a props?
- How to prevent re-rendering the component which is inside router, when the state of super component changes?
- Rendering json data in multiple react.js components
- Redux form in custom input of material ui not working
- How can I set min time on a MUI TextField of type='time'?
- React Js / Active item on menu with state
- Type 'number' is not an array type on react typescript reducer
- Getting props through HOC when mounting in Enzyme
- Build react app multiple times with different environment variables
- Mui DatePicker change date format
- How to get the name attribute in a bound function in react?
- In React, how would you dynamically render a component?
- How to achieve an async function chain with await when the functions are parent and child?
- Can I use window.localStorage in my React application?
- webpack--watch not working
- Add delay between two functions in reactjs
- How to use mutations in react-apollo-hooks and formik?
- How to set value as undefined in 'this.state' inside constructor?