automated-testscypressclickablecypress-conditional-testing

Is there a way to return true or false if an element is clickable. I want to check if one of 3 imprint links is clickable


I want to find out if imprint links are working. Sometimes there are cookie consistent banners and you can not click the link on the page.

But is there a way to find out if there is a second imprint link is clickable on the modal?

export const ttValidateImprintClickable = () => {
  cy.log("validateImprintClickable - NCA TESTIFY");
  cy.get("a")
    .contains("Impressum")
    .each((item) => {
      let isClick = item.;
      debugger;
    });
};

Example page https://www.qi-digital.de

Plugin to publish solution open source https://github.com/ncatestify/cypress-base-plugin/blob/main/src/commands/tt-validate-imprint-clickable.ts


Solution

  • The problem is not that you need to find one of the options that is clickable. All the links are all non-clickable because the cookie dialog is covering them.

    This is how you can dismiss the cookie dialog and the gray mask which covers the main page

    cy.visit('https://www.qi-digital.de');
    
    // in case the cookie is already set and the mask does not appear
    // use a conditional check first
    
    cy.get('body').then($body => {
      if ($body.find('#SgCookieOptin').length) {
        cy.get('.sg-cookie-optin-box-close-button').click()
      }
    })
    
    // now just click the link
    cy.contains('a', 'Impressum').click()
    
    // and confirm the new page appears
    cy.contains('h1', 'Impressum', {timeout:10_000}).should('be.visible')
    

    It seems to me that in the test runner, the cookie dialog always appears, in which case you can simplify the test

    cy.visit('https://www.qi-digital.de');
    
    // remove the cookie dialog
    cy.get('.sg-cookie-optin-box-close-button').click()
    
    // now just click the link
    cy.contains('a', 'Impressum').click()
    
    // and confirm the new page appears
    cy.contains('h1', 'Impressum', {timeout:10_000}).should('be.visible')
    

    Clicking the "Impressum" link on the cookie modal

    This code will click the "Impressum" link that is on the footer of the cookie modal.

    I added some code to clear application data to force the modal, but it's not consistently showing the cookie modal.

    cy.clearCookies()
    cy.clearLocalStorage()
    
    cy.get('#SgCookieOptin')               // cookie modal
      .find('a:contains(Impressum)')       // find the link in the modal footer
      .then($a => $a.removeAttr('target')) // stop new browser tab opening
      .click()