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

Answer 2

Take a look at this page Is focusable

Is focusable

Returns a boolean indicating whether an element can receive focus.

Cypress internally uses this method everywhere to figure out whether an element is hidden,
mostly for actionability.

So try mapping the elements to the true/false result of this method

cy.contains('a', 'Impressum')
  .each($el => {
    const isActionable = Cypress.dom.isFocusable($el) 
    ... // continue test
  })

---

Looking at your gist, this may be what you need

cy.contains('a', 'Impressum')
  .filter((index, el) => Cypress.dom.isFocusable(Cypress.$(el)) )
  .eq(0)
  .click()

Where the filter command takes a function and passes only those that return true.

Since Cypress.dom.isFocusable() needs a jQuery object (same as passed to .each()) we first need to wrap the "raw" element given to .filter().

Next, take the first only in case multiple items are clickable.

Or click multiple items at once like this (but probably you only want one item).

cy.contains('a', 'Impressum')
  .filter((index, el) => Cypress.dom.isFocusable(cy.wrap($el)) )
  .click({multiple:true})