Cypress CSS Locator I am trying to locate a colour picker element from a parent class. I can get to-CodePudding

I have a UI with a list of elements, 2 columns. The first columns shows the name of the item e.g. Manager, Operator and the list will grow The 2nd column is a colour picker element. You can choose a colour I am trying to find the colour picket element for a name e.g. for Operator I want to iterate over the elements and find the colour picker element for Operator From the HTML Code snippet below I want to locate the following line

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

I can get the list of name elements by using the following css

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

I don't know how to go further down to get to the colour-select class

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

I have the following HTML Code Snippet

<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 _ngcontent-ppo-c336="" class="col-sm-1 form-check">..</div>
      <div _ngcontent-ppo-c336="" class="col-sm-5">
         <span _ngcontent-ppo-c336="" class="form-control" title="" data-disabled="false">Operator</span>
         <!--bindings={
            "ng-reflect-ng-if": "true"
            }--><!--bindings={}--><!--ng-container--><!--bindings={
            "ng-reflect-ng-switch-case": "Description"
            }--><!--bindings={
            "ng-reflect-ng-switch-case": "Colour"
            }--><!--bindings={
            "ng-reflect-ng-switch-case": "Boolean"
            }--><!--ng-container-->
      </div>
      <div _ngcontent-ppo-c336="" class="col-sm-3">
         <!--bindings={
            "ng-reflect-ng-switch-case": "Description"
            }-->
         <arm-colour-picker _ngcontent-ppo-c336="" name="colourPicker" ng-reflect-input-id="colourPicker_2" ng-reflect-colour-id="-2">
            <div class="arm-colour-picker" title="1">
               <span tabindex="0" class="colour-select" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"></span>
               <input type="hidden" id="colourPicker_2" ng-reflect-name="colourPicker_2_dropdown" ng-reflect-is-disabled="false" class="ng-untouched ng-pristine ng-valid" value="[object Object]" ng-reflect-model="[object Object]">
               <!--bindings={}-->
            </div>
         </arm-colour-picker>
         <!--ng-container-->
         <!--bindings={
            "ng-reflect-ng-switch-case": "Colour"
            }-->
         <!--bindings={
            "ng-reflect-ng-switch-case": "Boolean"
            }-->
         <!--ng-container-->
      </div>
      <!--bindings={
         "ng-reflect-ng-for-of": "[object Object],[object Object"
         }-->
      <div _ngcontent-ppo-c336="" class="col-sm-1 float-right">..</div>
      <div _ngcontent-ppo-c336="" class="col-sm-1 float-right">..</div>
   </div>
   </div>
</li>
<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="371" orderid="0">
   <div _ngcontent-ppo-c336="" class="row">
      <div _ngcontent-ppo-c336="" class="col-sm-1 form-check"><input _ngcontent-ppo-c336="" type="checkbox" title="" ng-reflect-name="checked-371" ng-reflect-is-disabled="false" class="ng-untouched ng-pristine ng-valid"></div>
      <div _ngcontent-ppo-c336="" class="col-sm-5">
         <span _ngcontent-ppo-c336="" class="form-control" title="" data-disabled="false">Minor</span><!--bindings={
            "ng-reflect-ng-if": "true"
            }--><!--bindings={}--><!--ng-container--><!--bindings={
            "ng-reflect-ng-switch-case": "Description"
            }--><!--bindings={
            "ng-reflect-ng-switch-case": "Colour"
            }--><!--bindings={
            "ng-reflect-ng-switch-case": "Boolean"
            }--><!--ng-container-->
      </div>
      <div _ngcontent-ppo-c336="" class="col-sm-3">
         <!--bindings={
            "ng-reflect-ng-switch-case": "Description"
            }-->
         <arm-colour-picker _ngcontent-ppo-c336="" name="colourPicker" ng-reflect-input-id="colourPicker_3" ng-reflect-colour-id="-2">
            <div class="arm-colour-picker" title="1">
               <span tabindex="0" class="colour-select" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"></span><input type="hidden" id="colourPicker_3" ng-reflect-name="colourPicker_3_dropdown" ng-reflect-is-disabled="false" class="ng-untouched ng-pristine ng-valid" value="[object Object]" ng-reflect-model="[object Object]"><!--bindings={}-->
            </div>
         </arm-colour-picker>
         <!--ng-container--><!--bindings={
            "ng-reflect-ng-switch-case": "Colour"
            }--><!--bindings={
            "ng-reflect-ng-switch-case": "Boolean"
            }--><!--ng-container-->
      </div>
      <!--bindings={
         "ng-reflect-ng-for-of": "[object Object],[object Object"
         }-->
      <div _ngcontent-ppo-c336="" class="col-sm-1 float-right"><span _ngcontent-ppo-c336="" cdkdraghandle="" class="cdk-drag-handle fa fa-bars order-button" style="touch-action: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; user-select: none;"></span></div>
      <!--bindings={
         "ng-reflect-ng-if": "true"
         }-->
      <div _ngcontent-ppo-c336="" class="col-sm-1 float-right">
         <button _ngcontent-ppo-c336="" type="button" class="delete far fa-times"></button><!--bindings={
            "ng-reflect-ng-if": "true"
            }--><!--bindings={}-->
      </div>
   </div>
</li>

What css locator can i use to get to the colour-select class please. Thanks for your help

e.g. code snippet this gets me all the elements of the names

static get AudienceColour(): Cypress.Chainable<JQuery<HTMLElement>> {                
        const AudienceResourceText = [
            "Undefined",
            "Manager",
            "Operator",
            "Minor"
        ];
        return 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]);
        });
    }

Riaz

CodePudding user response：

You can do this by using using the within() command

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') //gets the color-select class
  })
})

CodePudding user response：

The problem is the .get() selector is too specific.

You have this (simplified) html

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

If you cut it down to li[class='cdk-drag item container-fluid'] .row you get the rows which contain both the text and the color-picker.

.should("contain.text", ...) searches all children of the element specified, so it still works as you expect.

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 answers your question about how to select the color-picker, but there are more problems related to returning it from the method.

Maybe you want to do this:

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')     // grab the style attributes
        .then(styles => colors.push(styles)
    })
    .then(() => return colors)
}