How to use listFlags method in Cypress

Friends

Firstly, Thanks for all your time & suggestions.

I have found the work around to trigger the mouseover event and show the bootstrap submenu. without using the { force: true }.

Solution that I implemented. Appreciated if anyone finds different and better solution. Please do share.

Cypress.$($elem[0]).siblings("ul").show();

Using this I have manually makes the ul to show first and then execute the click event of the submenu. For this I have tried

Cypress.$($elem[0]).hover(false, false);
Cypress.$($elem[0]).mouseover();
Cypress.$($elem[0]).trigger("hover");
Cypress.$($elem[0]).trigger("mouseover");

but above commands didn't work. So I move to manually trigger the hide/show event of jquery.

This seems to work folks. I believe initial !important is a reference of some sort and not an actual value and maybe that's why .css() wouldn't work.

Cypress.Commands.add('hideHubSpot', () => {
    cy.get('#hubspot-messages-iframe-container')
        .invoke('attr', 'style', 'display: none')
        .should('have.attr', 'style', 'display: none')

HTTP_PROXY was added and Cypress.io should be able to work with your proxy with that set. I however still can't get our HTTPS to work, so its not totally working

You can patch the standard describe() function, which will add the hook transparently.

const originalDescribe = global.describe
const describe = (title, callback) => {
  originalDescribe(title, () => {
    before(() => {
      console.log('describe', title)
    });
    callback();
  });
}

describe('Main', ()=> {
  
  describe('Sub', () => {
    it('some tests', ()=> {
      console.log('it', 1)
    })
    
    it('some tests2', ()=> {
      console.log('it', 2)
    })
  })
  
  describe('Sub 2', () => {
    it('some tests', ()=> {
      console.log('it', 3)
    })
  })
})

Or another (simpler) approach is just to call you beforeDescribe() hook at the start of each describe() block.

const beforeDescribeHook = () => {
  const title = Cypress.mocha.getRunner().suite.title;
  console.log('describe', title)
}

describe('Main', ()=> {

  before(beforeDescribeHook)
  
  describe('Sub', () => {

    before(beforeDescribeHook)

    it('some tests', ()=> {
      console.log('it', 1)
    })
    
    it('some tests2', ()=> {
      console.log('it', 2)
    })
  })
  
  describe('Sub 2', () => {

    before(beforeDescribeHook)

    it('some tests', ()=> {
      console.log('it', 3)
    })
  })
})

I have tried with 'eq' and 'rgb' values corresponding to colour #f2e47d. In the following link 'brian-mann' from cypress.io affirms that says 'match' is always for regex. https://github.com/cypress-io/cypress/issues/58 Now the test got successfully asserting the background-color value in the footer area.

describe("Background Color test", () => {
  it.only('Verify the backgroud color, this should work', () => {
     cy.visit('https://sometesturl.com')
     cy.get('#footer')
       .should('have.css', 'background-color')
       .and('eq', 'rgb(242, 228, 125)')
  })
})

Beginning with version 9.0.0, You are now forced to declare your custom commands. See the changelog for 9.0.0 (6th bullet point under breaking changes) and see the specific information about custom commands now being typed based on the declared custom chainable here.

Also, see this recipe on how to add custom commands and declare them properly.

For your custom command, add this file cypress/support/index.d.ts with the following code:

/// <reference types="cypress" />

declare namespace Cypress {
    interface Chainable<Subject = any> {
        /**
         * Custom command to ... add your description here
         * @example cy.clickOnMyJourneyInCandidateCabinet()
         */
        clickOnMyJourneyInCandidateCabinet(): Chainable<null>;
    }
}

I'm not sure you already resolved this, but I leave my solution for other

cy.get('.bg-cover')
  .should('have.css', 'background-image')
  .and('include', 'myimage.png')

I think the step .invoke('attr', 'href') is just returning the first, see .attr()

Get the value of an attribute for the first element in the set of matched elements

So, maybe

cy.get('[foo="bar"] a')
  .then($els => {
    const hrefs = [...$els].map(el => el.getAttribute('href'))
    cy.writeFile('./cypress/downloads/results.txt', hrefs)
  })

Wrap the comparsion in a function, then call it for each button

const compare = ($button, selector2) => {
  cy.get(selector2).then($selector2 => {
    expect($button.text()).to.eq($selector2.text())
  })
}

const selectors = ...
selectors.forEach((buttonSelector) => {
  cy.get(buttonSelector, { timeout: 10000 }).click()
    .then($button => compare($button, 'Second element'))

Detached from DOM

Sometimes the button element may be replaced after clicking (particularly a React app). You might see a "detached from DOM" error.

In this case, you need to re-query the button inside the function

const compare = (buttonSelector, selector2) => {
  cy.get(buttonSelector).then($button => {
    cy.get(selector2).then($selector2 => {
      expect($button.text()).to.eq($selector2.text())
    })
  })
}

const selectors = ...
selectors.forEach((buttonSelector) => {
  cy.get(buttonSelector, { timeout: 10000 }).click()
    .then(() => compare(buttonSelector, 'Second element'))