I would like to count the number of elements in the dom that are checked
Example :
cy.get('.p-multiselect-item .p-highlight').its('length');
You are using p-multiselect-item as a class (leading dot) but actually it's a tag.
Try
cy.get('p-multiselect-item .p-highlight') // find <p-multiselect-item>
// with children having class p-highlight
.its('length')
.should('eq', 2)
Have you tried this :
cy.get('#groupSelect').children('option').length
if not you have some answer here :
How to count DOM elements in Cypress assertion
Related
How to get the number of divs that contain 'userid' from the div with id="chatListHolder"
https://i.stack.imgur.com/QzzLh.png
If a command that yields an element finds more than one element, it will yield all of them. So, we can then check the yielded array of element's length.
cy.get('#chatListHolder')
.should('have.length', 1); // we can change that 1 to whatever number we'd like
// or if we need to do something with that
cy.get('#chatListHolder')
.its('length').should('be.gt', 1);
// or another possibility
cy.get('#chatListHolder')
.its('length')
.then((length) => {
// whatever needs to be done with the length variable
});
I can test the first element of the Dom element but I don't know how to get the second element?
it('should display highlight', () => {
const highlights = cy.get(`.${pageClass} .page_highlight`);
highlights.should('have.length', 2);
highlights.first().should('contain.text', translations.highlight);
});
There are two options for your case.
Since the total number of elements is just two in your case, you can use something called last. You can read more here.
If the number of elements is dynamic, you can use something called eq and pass the order of element as an index. You can read more here.
Goal: In Cypress, traverse tree of <div>, find child <div>s with <select>, and command .select
Simplified, my page document is arranged as follows:
<div.Root>
...
<div.Actions>
<div.Action>
...
<div.Box>
...
<select.Do>
<div.Action>
...
<div.Box>
...
<select.Do>
With Cypress, I get stuck traversing children and performing action <select> of each child:
div.Root > div.Actions > div.Action > div.Box > select.Do
> div.Action > div.Box > select.Do
Example Cypress.io code, I get as far as finding the child HTMLelement(s) for <div.Action>, but get stuck there not discovering how to traverse further and perform command .select:
cy.get('div.Root').then($divRoot => {
expect($divRoot.find('div.Actions').length).eq(1);
cy.get('div.Actions').then( $divActions => {
expect($divActions.find('div.Action').length).gte(1);
// Here is where I get lost at to what to do
// Within each <div.Action>, I want to perform select
$divActions.find('div.Action').each(($index, $divAction) => {
// $divAction is not a Cypress element
// that can perform commands like get, find, select
})
Much appreciate assistance
https://docs.cypress.io/api/commands/each.html#DOM-Elements.
According to the Cypress documentation in the each callback the element is passed first and then the index. In your example you would be trying to perform cypress actions on the index.
Secondly, you have to wrap the dom element that is passed in with cy.wrap to be able to perform cypress actions on that element.
Here's how I was able to do it:
cy.get("div.actions")
.find("select")
.each(($el) => {
cy.wrap($el).select();
});
I got a tree of elements and each element got a toggle icon to expand it -My intention is to click on the toggle icon corresponding to the element have a text for ex "TIME PERIODS"
Currently i write my code like below , Is there a better way to do this?
Please see the screenshot for my element structure.
cy.get('.tree-node',{ timeout: 60000 }).contains('TIME PERIODS',{force: true}).parent().parent().find('.tree-node-collapsed').click()
each() method is available in Cypress.io. Using which we can travell through tree of elements and can filter using text. Please follow below code approach:
Code
cy
.get('.tree-node')
.each(($el, index, $list) => {
// $el is a wrapped jQuery element
$el.get('.tree-item').contains('TIME PERIODS').siblings('.tree-node-
collapsed').click();
});
I have fixed issues -working code given below
cy.get('.tree-node').each(($el, index, $list) => {
// $el is a wrapped jQuery element
cy.wrap($el).get('.tree-item').contains('TIME PERIODS').parent().siblings('.tree-node-collapsed').click();
We can do like shown below also with out using .each
cy.get('.tree-node').get('.tree-item').contains('Header').parent().siblings('.tree-node-collapsed').click();
Considering theses xpath expressions :
//*[#id="searchResults"]/div[1]/div[1]/h2/span
//*[#id="searchResults"]/div[3]/div[1]/h2/span
//*[#id="searchResults"]/div[5]/div[1]/h2/span
For your info the div inside search result's class is article searchResult and the one inside article searchResult is header.
I am not sure how to construct an xpath matching all three of the above elements. Is there a tool or a how to guide for that?
Thanks
Use position function
//*[#id="searchResults"]/div[position()=1 or position()=3 or position()=5]/div[1]/h2/span
If, by 'all', you mean all div in even position index, then you can use mod operator to check :
//*[#id="searchResults"]/div[position() mod 2 = 1]/div[1]/h2/span
but if 'all' literally means all, then you don't need index to return all matched elements :
//*[#id="searchResults"]/div/div[1]/h2/span