How to use convertSameSiteCdpToExtension method in Cypress

Do it by chaining conversions methods to go from from element -> text -> number

cy.get(".badge.ml-1.badge-primary")
  .invoke('text')                    // to text
  .then(text => +text)               // to number
  .then(value => {
    if(value > 0) { 
      doFunction1()
    } else {
      cy.get(xxxxx)
    }
  })

Waiting for value 2

cy.get(".badge.ml-1.badge-primary")
  .invoke('text')                    // to text
  .then(text => +text)               // to number
  .should('eq', 2)                   // wait for value 2
  .then(() => {
    doFunction1()                    // now doFunction
  })

Cypress has a unique workflow that is based around baking in as many tests as possible into its default behavior. Before it simulates the click on the element containing "Family", it checks for actionability. This is a built in test that will fail if the element is hidden, display:none(that's the case here), size 0,0, etc. Only after it passes that test will it simulate the action on the element containing 'Family'.

You can override the actionability check by using .click({force:true}), but then you lose the guarantee that the user would actually be able to find and click on the element.

The proper way to do this test is to trigger the dropdown menu so that the element becomes visible, and then do the click. Here's what you would do if you wanted to find the "Genre" menu item, reveal the dropdown menu, and click the "Family" item:

describe('Hover Menu',()=>{
    it('can click on a genre sub-menu item',()=>{
        cy.get('#menu').contains('Genre').next('.sub-menu').then($el=>{
            cy.wrap($el).invoke('show')
            cy.wrap($el).contains('Family').click()
        })
    })
})

Here, show is a jQuery method that modifies CSS properties to make the element visible.

cy.wrap($el) turns a jQuery element into a Cypress Chainer, which you can then call Cypress commands on.

Use cy.log(yourTextHere). That should work.

This solution should work:

cy.contains('01 - Parts inventory').parent().next().children()
.should('have.text','2899869.56')

The difference is between attribute and property.

Under the hood cy.getByTestId('save').should('be.disabled') is checking that the element has property disabled. The standard button translates the attribute disabled into a corresponding property, so it passes the above assertion.

The custom button obviously does not have that behavior, so it might be difficult to treat custom-button the same as button.

One thing that works for your sample is

cy.getByTestId('save').should('have.attr', 'disabled')

This should work for all occurrences of custom-button (if my assumption about it's behavior is correct).

If you have trouble with standard button, you can check both:

cy.getByTestId('save').should($el => {
  return $el.attr('disabled').length > 0 || $el.prop('disabled').length > 0
})

You can make a custom assertion if that's a pain to code everywhere.

IMO using .find('button') isn't optimal, since it's an internal implementation of the custom-button.

The jQuery .index() method is useful here

Search for a given element from among the matched elements

cy.contains('table thead th', 'Contact')
  .then($th => $th.index())
  .then(contactIndex => {
    cy.get('table tbody td').eq(contactIndex).should('contain', 'Maria Anders')
  })

You can use addContext. In cypress/support/commands.js you have to put this code:

import addContext from 'mochawesome/addContext';
Cypress.Commands.add('addContext', (context) => {
  cy.once('test:after:run', (test) => addContext({ test }, context));
});

After that you can use the command cy.adContext in your test:

cy.get('p').invoke('text').then(($text) => {
  cy.addContext($text);
});

To use .within() you need to navigate up with a 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
    })
})

According to Best Practices | Cypress - Selecting elements, the best way to do it is using dedicated data-cy attribute for your cypress tests, and then, within the tests, using CSS attribute selectors.

Best Practice: Use data-* attributes to provide context to your selectors and insulate them from CSS or JS changes.

In your case, I would do it this way:

<div class="table"> 
   <div class="col-sm-10">Item 1</div>
   <div class="col-sm-2 action">
    <a href="#"><i class="fa-times-circle-o"></i></a>
   </div>
   <div class="col-sm-10">Item 2</div>
   <div class="col-sm-2 action">
    <a href="#" data-cy="item-2-anchor"><i class="fa-times-circle-o"></i></a>
   </div>
</div>

cy.get('[data-cy="item-2-anchor"]').click();

I strongly recommend doing it this way project-wide, as it guarantees working tests despite any changes made to other attributes (id, class, href ..) under development.