How to use getTags method in Cypress

You can try dropping down to jQuery/JavaScript to manually set the field:

cy.get('select').then($country => {$country.val("gb")})

The $country above should be a jQuery object wrapping the html that you selected.

See: https://docs.cypress.io/api/commands/then.html#Syntax

The order of commands matters. In my case I had to move the cy.intercept() command before the action that performed the request

//the intercept comes first
cy.intercept("POST", "**/api/user/login").as("loginResponse");

//this performs POST request in my case, comes second
cy.get('button[type="submit"]').should("not.be.disabled").click();

//thirdly comes the wait
cy.wait("@loginResponse").its("response.statusCode").should("eq", 200);

//cypress doesn't know how to hover so 'invoke' call JQuery 'show' method which force menu to become visible

cy.get('#myAccount').invoke('show');

that worked for me.

After a plentitude of being angry at my keyboard, I have found the winning solution.

Using invoke you can store the value of an attr like src, as shown here: https://docs.cypress.io/api/commands/invoke.html#Arguments-are-automatically-forwarded-to-the-function

So, after a few tweaks to the above attempts, I found this to work perfectly:

    cy.get('.image-root img').invoke('attr', 'src').then((firstSrc) => {
      const src1 = firstSrc

        /**
         * File drop 2mb jpg
         */
        cy.fixture(Cypress.env("JPG_2MB"), "base64").then(fileContent => {
          cy.get(".dropzone").upload(
            {
              fileContent,
              fileName: "sampleimage.jpg",
              mimeType: "image/jpeg"
            },
            { subjectType: "drag-n-drop" }
          );
        });

        cy.wait(16000);

      cy.get('.image-root img').invoke('attr', 'src').then((nextSrc) => {
        expect(nextSrc).to.not.equal(src1)
      });
    });

Depending on what you are testing (the hover behaviour vs. the navigation itself), it might help to force click on the (invisible) item like cy.click({force: true}), see https://docs.cypress.io/api/commands/click.html#Force-a-click-regardless-of-its-actionable-state.

To be able to locate the navigation item in a reliable (as opposed to the list ordering) manner, I typically add a unique data attribute and select by that, e.g. cy.get('a[data-testid="nav-option-1"]').click({force: true})

Here's a good read on this approach: https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change

You should add a cy.get() for something that only appears after the page load is finished,

cy.bookspanel = {
  getBookNavigationTab: function () {
    cy.get('a > span').contains("Books").click();
    cy.contains('h2', 'Heading that displays after page is loaded');  
    // Will not run next command until above heading appears.
  }
}

or pass to the function as a parameter if it changes on each page

cy.bookspanel = {
  getBookNavigationTab: function (myContent) {
    cy.get('a > span').contains("Books").click();
    cy.contains(myContent);  
    // Will not run next command until above content appears.
  }
}

cy.bookspanel.getBookNavigationTab('Heading that displays after page is loaded');

You can try doing this:

• Open the cypress app (Test Runner)
• Go to File -> View App Data
• Delete everything in here
• Close cypress and open it up again

If the above doesn't work out, you can check this link. It talks about some work-arounds.

https://docs.cypress.io/guides/references/error-messages#Cypress-detected-policy-settings-on-your-computer-that-may-cause-issues

Cypress has wait method, which will wait for given time. For more info here

Example:

(async function doWaitForDialogOpen() {
    await cy.wait(4000) // waits 4 seconds
    const $iframe = await cy.get('#iframeID0')
    Cypress.$($iframe)
   .find('html')
   .find('body')
   .find('#someId')
   .find('input')
   .type(100);
  // Do your next steps
 })();

Finding the card with name 'cypress' and clicking the edit button

cy.contains('.MuiCardContent-root', 'cypress').within(() => {
  cy.get('svg.MuiSvgIcon-root').eq(0)  // 1st button is edit
    .click()
})