click not work on after() hook, when test failed

[kilbc634]

Current behavior

Whether the test is successful or not, I want to do some restore actions (ex: logout) in afterEach(), and the actions will do some click.

Then found a issue.
If the test not fail, then click on afterEach() can work normally,
if there is a failure, then click on afterEach() will not work(but Cypress shows that did not fail)

Example

Normally Case: (Refer to Click morevert (without fail) in reproduce)

1. it start
2. do something(without fail)
3. it end
4. afterEach start
5. do some one click(work normally)
6. afterEach end

Issue Case: (Refer to Click morevert (with fail) in reproduce)

1. it start
2. do something(with fail)
3. afterEach start
4. do some one click(not work) <----------
5. afterEach end

Desired behavior

Whether the test is successful or not, expected the web element can be click normally in afterEach() and after() hook.

Test code to reproduce

execute command:
npx cypress run -b chrome --headed --spec "cypress/e2e/sample/test_google_search.cy.js"

minimal reproducible example:

cypress/e2e/sample/test_google_search.cy.js

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

describe('Test google search', {
  env: {
    HOME_PAGE: 'https://www.google.com/?hl=zh_tw',
  },
}, () => {
  before(() => {
    cy.visit(Cypress.env('HOME_PAGE'));
  });
  afterEach(() => {
    cy.log('afterEach STRAT!');

    // click morevert button
    cy.get('div#gb-main > header > #vLkmZd .gb_Zc > div#gbwa').should('be.visible').click()
    cy.wait(3000);
    // click morevert button
    cy.get('div#gb-main > header > #vLkmZd .gb_Zc > div#gbwa').should('be.visible').click()
    cy.wait(3000);

    cy.log('afterEach END!');
  });

  it('Click morevert (without fail)', () => {
    cy.log('it START!');

    // check google logo
    cy.get('div#outer > div > img#hplogo[alt="Google"]').should('be.visible');
    // check search input
    cy.get('div#main form div.SDkEP input').should('be.visible');

    // click morevert icon
    cy.get('div#gb-main > header > #vLkmZd .gb_Zc > div#gbwa').should('be.visible').click()
    cy.wait(3000);
    // click morevert icon
    cy.get('div#gb-main > header > #vLkmZd .gb_Zc > div#gbwa').should('be.visible').click()
    cy.wait(3000);

    cy.log('it END!');
  });

  it('Click morevert (with fail)', () => {
    cy.log('it START!');

    // check google logo
    cy.get('div#outer > div > img#hplogo[alt="Google"]').should('be.visible');
    // check search input
    cy.get('div#main form div.SDkEP input').should('be.visible');

    // click morevert icon to fail
    cy.get('div#gb-main > header > #vLkmZd .gb_Zc > div#gbwa toFail').should('be.visible').click()
    cy.wait(3000);
    // click morevert icon to fail
    cy.get('div#gb-main > header > #vLkmZd .gb_Zc > div#gbwa toFail').should('be.visible').click()
    cy.wait(3000);

    cy.log('it END!');
  });
});

cypress.config.js

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  reporterOptions: {
    embeddedScreenshots: true,
    inlineAssets: true,
  },
  viewportWidth: 896,
  viewportHeight: 414,
  chromeWebSecurity: false,
  e2e: {
    setupNodeEvents(on, config) {
      require('cypress-mochawesome-reporter/plugin')(on);
      return config;
    },
    screenshotOnRunFailure: true,
    screenshotsFolder: 'cypress/reports/screenshots',
    videosFolder: 'cypress/reports/videos',
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1',
    testIsolation: false,
  },
});

Cypress Version

10.9.0 and 12.1.0

Node version

v16.16.0

Operating System

macOS 12.3.1

Debug Logs

video: (0:22 try to click the morevert icon in the upper right, but the UI didn't expand)
https://www.youtube.com/watch?v=XxwXbRVtthI

Other

No response

[vbukin]

I have the same problem

[mschile]

Hi @kilbc634 and @vbukin 👋, this is a known issue and is a duplicate of #2831.

We consider the use of afterEach to clean up state an anti-pattern. You can read more about it here.

However, if it's absolutely necessary, you can try adding force: true in the click:

  afterEach(() => {
    cy.log('afterEach STRAT!');

    // click morevert button
    cy.get('div#gb-main > header > #vLkmZd .gb_Zc > div#gbwa').should('be.visible').click({ force: true })
    cy.wait(3000);
    // click morevert button
    cy.get('div#gb-main > header > #vLkmZd .gb_Zc > div#gbwa').should('be.visible').click({ force: true })
    cy.wait(3000);

    cy.log('afterEach END!');
  });