Question 415758 in CSS Question posted in
Some basic documentation can be found here.

Css – How can I modify the cypress selector to only highlight the buttons that have "COVID" in the category?

selector highlighting all 4 buttons

code for "COVID-19 Resume" element

This selector:

cy.get('.mat-mdc-row[data-canedit="true"]:has(.mat-column-categories>span) .mat-column-actions button[id^=actionMenu]')

highlights all 4 buttons in the far-right column. How can I modify it to where only the buttons in the same row as the "COVID-19-Resume" category get selected.

I tried

.mat-mdc-row[data-canedit="true"]:has(.mat-column-categories>span:contains("COVID")) .mat-column-actions button[id^=actionMenu]

But that showed 0 results.

Tags:

2

Answers


  1. 0

    Have you tried using the cypress‘s contains method to select by the value inside and get the element, then use parent() to access the row element, finally select the button using get() method.

    describe('AppComponent', () => {
  it('mounts', () => {
    cy.mount(AppComponent);
    const parent = cy.get('.mat-mdc-tooltip-trigger').contains('COVID-19-Resume').parent().parent(); // go to tr row
    const button = parent.get('.mat-column-actions button[id^="actionMenu"]');
    button.click();
  })
})
    Login or Signup to reply.
  2. 0

    To find the row that has "Covid" in the second column, use td:nth-child(2):contains("Covid").

    To illustrate, here’s a similar test on the Material Angular examples page.

    enter image description here

    it('get last column of a row with particular value in Name column', () => {

  cy.visit('https://material.angular.io/components/table/examples');

  cy.get('table-basic-example').within(() => {

    cy.get('tr:has( td:nth-child(2):contains("Lithium") )')
      .find('td:last')
      .should('have.text', ' Li ')
  })
})

    enter image description here

    You have more than one Category with "Covid", so I recommend adding :first as well,

    cy.get('tr:has( td:nth-child(2):contains("Covid"):first )')
  .find('td:last')
  .click()
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search