CODEWITHSUNDEEP
arrayselementcypress
user9347168
user9347168

Reputation:

Cypress - finding multiple elements with the same name

Ok. Being naive, I though I could just jus cy.get('#selector').eq(index) to access specific elements withing an array of elemenets. Also, the examples I've been looking at, implies that the get() method will indeed return either one or an array of elements. However, I cannot get this to work with the following code:

<div aria-labelledby="accordion-1-tittel" class="hb-accordion-body" id="accordion-1-body" role="tabpanel">
 <app-boliginformasjon-etasje data-e2e-selector="floor" _nghost-pkr-c10="">
  <div _ngcontent-pkr-c10="" class="hb-animation--appear">
   <div _ngcontent-pkr-c10="" class="hb-layoutKontainer egot-etasje-th">
    <div _ngcontent-pkr-c10="" class="hb-egot--floor-title" translate=""> Etasje <!---->
     <span _ngcontent-pkr-c10="" data-e2e-selector="floor-number">H02</span>
      ...
 <app-boliginformasjon-etasje data-e2e-selector="floor" _nghost-pkr-c10="">
  <div _ngcontent-pkr-c10="" class="hb-animation--appear">
   <div _ngcontent-pkr-c10="" class="hb-layoutKontainer egot-etasje-th">
    <div _ngcontent-pkr-c10="" class="hb-egot--floor-title" translate=""> Etasje <!---->
     <span _ngcontent-pkr-c10="" data-e2e-selector="floor-number">H03</span><!---->

The elements I'm looking for here are the <span data-e2e-selector="floor-number". Ideally, I'd just want to do something like

cy.get('[data-e2e-selector=floor-number]').should('contain', 'H03');

to check the whole array for a specific value. But It's also acceptable to do something like

cy.get('[data-e2e-selector=floor-number]').eq(1).should('contain', 'H03')

However, the element returned contains only the first element, containting the 'H02' value. If I try accessing index 1 with eq(1), it doesn't exist:

Timed out retrying: Expected to find element: 1, but never found it. Queried from element: <span>

So, apparently only the first data-e2e-selector="floor-number" element is found.

Ideas?

Upvotes: 2

Views: 5360

Answers (2)

panigale
panigale

Reputation: 55

I would suggest you to try out within command. Below is just an example from my tests:

                cy.get('#something')
                .within(() => {
                    cy.findByText(randomDayNumber - 2).click();
                });

Docs: https://docs.cypress.io/api/commands/within

Upvotes: 1

Łukasz Świeboda
Łukasz Świeboda

Reputation: 11

I had issue like this:
Two buttons with the same names -> data-cy="new-alert-button". I would like to catch the second one. Then I start to compare them in google inspector tool. They were almost the same but, one of them had:

class="pds-c-button pds-c-button_button pds-c-button_default pds-c-button_light"

and second had:

class="pds-c-button pds-c-button_button pds-c-button_default pds-c-button_primary".

So I decide to catch it by class pds-c-button_primary like this:

cy.get(".pds-c-button_primary").contains("Submit").click()

and it worked.

Upvotes: 1

Related Questions