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

Question

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

Answer 1

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()