I am currently attempting to find a color picker element within a parent class using Cypress CSS Locator. While I am able to reach the parent element, I am unsure of the correct method to target the

Question

I am currently attempting to find a color picker element within a parent class using Cypress CSS Locator. While I am able to reach the parent element, I am unsure of the correct method to target the

My user interface has a list of elements displayed in 2 columns. The first column shows the name of the item, such as Manager, Operator, and the list is expected to grow. The second column consists of a color picker element where you can choose a color. I am currently trying to locate the color picker element for a specific name, for example, for Operator. I need to iterate over the elements and find the color picker element for Operator. Below is an HTML code snippet I would like to locate:

<span tabindex="0" class="colour-select" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"></span>

To retrieve the list of name elements, I am using the following CSS selector:

li[class='cdk-drag item container-fluid'] span[class='form-control']

However, I am uncertain about how to proceed further to access the colour-select class in the code snippet above.

When examining the HTML code snippet provided:

<li _ngcontent-ppo-c336="" cdkdrag="" class="cdk-drag item container-fluid" ng-reflect-ng-class="[object Object]" ng-reflect-data="[object Object]" ng-reflect-disabled="false" rowid="370" orderid="0">
   <div _ngcontent-ppo-c336="" class="row">
      ...
   </div>
</li>

I am seeking guidance on which CSS locator to utilize in order to access the colour-select class. Any assistance provided would be greatly appreciated.

Thank you for your help.

- Riaz

javascript css selenium-webdriver cypress

Answer 1

Answer №1

When utilizing the .within() method, make sure to navigate upwards using the parents command


const AudienceResourceText = ["Undefined", "Manager", "Operator", "Minor"];

cy.get("li[class='cdk-drag item container-fluid'] span[class='form-control']")
.each((item, index, list) => {
  cy.wrap(item)
    .should("contain.text", AudienceResourceText[index])   // subject is span
    .parents('.row')                                       // subject is div.row
    .within(() => {                         
      cy.get('span.colour-select')                         // gets the color-picker
        .should('have.css', 'color', 'rgb(0, 0, 0)')       // check the color
    })
})

Answer 2

When utilizing the .within() method, make sure to navigate upwards using the parents command


const AudienceResourceText = ["Undefined", "Manager", "Operator", "Minor"];

cy.get("li[class='cdk-drag item container-fluid'] span[class='form-control']")
.each((item, index, list) => {
  cy.wrap(item)
    .should("contain.text", AudienceResourceText[index])   // subject is span
    .parents('.row')                                       // subject is div.row
    .within(() => {                         
      cy.get('span.colour-select')                         // gets the color-picker
        .should('have.css', 'color', 'rgb(0, 0, 0)')       // check the color
    })
})

Answer 3

Answer №2

The issue lies with the specificity of the .get() selector.

Consider the following simplified HTML structure:

<li>
  <div class="row">
    <div class="col...">
      <span>TEXT-TO-FIND</span>
    </div>
    <div class="col...">
      <arm-colour-picker...
    </div>
  </div>
</li>

If you modify the selector to

li[class='cdk-drag item container-fluid'] .row

, you will target the rows containing both the text and the color-picker.

The

.should("contain.text", ...)

function searches through all children of the specified element, maintaining the expected behavior.

cy.get("li[class='cdk-drag item container-fluid'] .row")
  .each((item, index) => {
    cy.wrap(item)
      .should("contain.text", AudienceResourceText[index])
      .find('span.colour-select')
  })
}

This addresses the query regarding selecting the color-picker, though there are additional challenges related to method return.

Perhaps you intend to implement the following:

static get AudienceColour(): Cypress.Chainable<JQuery<HTMLElement>> {                

  const colors = []
  return cy.get("li[class='cdk-drag item container-fluid'] .row")
    .each((item, index) => {
      cy.wrap(item)
        .should("contain.text", AudienceResourceText[index])
        .find('span.colour-select')
        .invoke('attr', 'style')     // retrieve style attributes
        .then(styles => colors.push(styles)
    })
    .then(() => return colors)
}

Answer 4

The issue lies with the specificity of the .get() selector.

Consider the following simplified HTML structure:

<li>
  <div class="row">
    <div class="col...">
      <span>TEXT-TO-FIND</span>
    </div>
    <div class="col...">
      <arm-colour-picker...
    </div>
  </div>
</li>

If you modify the selector to

li[class='cdk-drag item container-fluid'] .row

, you will target the rows containing both the text and the color-picker.

The

.should("contain.text", ...)

function searches through all children of the specified element, maintaining the expected behavior.

cy.get("li[class='cdk-drag item container-fluid'] .row")
  .each((item, index) => {
    cy.wrap(item)
      .should("contain.text", AudienceResourceText[index])
      .find('span.colour-select')
  })
}

This addresses the query regarding selecting the color-picker, though there are additional challenges related to method return.

Perhaps you intend to implement the following:

static get AudienceColour(): Cypress.Chainable<JQuery<HTMLElement>> {                

  const colors = []
  return cy.get("li[class='cdk-drag item container-fluid'] .row")
    .each((item, index) => {
      cy.wrap(item)
        .should("contain.text", AudienceResourceText[index])
        .find('span.colour-select')
        .invoke('attr', 'style')     // retrieve style attributes
        .then(styles => colors.push(styles)
    })
    .then(() => return colors)
}

Answer 5

Answer №3

To achieve this, utilize the within() function

cy.get(
  "li[class='cdk-drag item container-fluid'] span[class='form-control']"
).each((item, index, list) => {
  cy.wrap(item).within(() => {
    expect(item).to.have.text(AudienceResourceText[index])
    cy.get('.colour-select') //obtains the color-select class
  })
})

Answer 6

To achieve this, utilize the within() function

cy.get(
  "li[class='cdk-drag item container-fluid'] span[class='form-control']"
).each((item, index, list) => {
  cy.wrap(item).within(() => {
    expect(item).to.have.text(AudienceResourceText[index])
    cy.get('.colour-select') //obtains the color-select class
  })
})

I am currently attempting to find a color picker element within a parent class using Cypress CSS Locator. While I am able to reach the parent element, I am unsure of the correct method to target the

Answer №1

Answer №2

Answer №3

Similar questions

Implementing a click event listener on an iframe that has been dynamically generated within another iframe

What is the best way to retain previous values without using an object array to store values in a React state?

Storing Firestore Timestamp as a Map in the database

I'm having trouble getting the code to work properly after the "else" statement using both jQuery and Javascript. My head is

I'm looking to fill multiple input boxes with the same value

Injecting JavaScript object values into dynamically generated modal

Generating a hyperlink to a specific user ID within a data table

Encountering an Invalid Cookie Domain Exception with Selenium WebDriver when increasing thread count to 20, yet functions properly with 15 threads

Searching dynamically using class names with JQuery

Enhancing Dataset Quality: Incorporating Failed Results with Apify

I am having trouble getting my getColor() method to correctly change colors based on the data provided

Parsing JSON or eliminating double quotation marks in data acquired from a model or database within the Rails framework

Encountering a script error that reads "TypeError: $ is not defined as a function

What is the best way to combine the existing array data with the previous array data in JavaScript?

Methods for presenting text from an object array using Angular

Use $parse to extract the field names that include the dot character

React drag and drop feature now comes with autoscroll functionality, making

Error: Angular encountered an undefined variable when attempting to import 'node_modules/bootstrap/scss/grid'

What is the process by which JavaScript evaluates the closing parenthesis?

ng-include not functioning properly within ng-table