1

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

T.Soithongsuk
  • 51
  • 6
Al Kativo
  • 135
  • 2
  • 9
  • This works for me https://stackoverflow.com/questions/56145926/how-to-check-if-element-exists-using-cypress-io – Al Kativo Jan 03 '23 at 22:52

2 Answers2

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})
Fody
  • 23,754
  • 3
  • 20
  • 37
Paolo
  • 3,530
  • 7
  • 21
2

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()
Fody
  • 23,754
  • 3
  • 20
  • 37
  • Hi, thx for your answer. The thing is that a imprint must be reachable when a Cookie Modal is there. The test hast to confirm that every time a imprint can be clicked. The thing is that here are 3 imprint links. And when the popup is open Cypress has to click the one in the footer. See you Roland – Al Kativo Jan 02 '23 at 10:14
  • 1
    There's actually more than 3 "Impressum" or "Imprint" in English. You can't click any that are on the main page until the cookie modal has been dismissed. That's just the way the site has been designed. You could probably force the click with `.click({force:true})`, but the user cannot do that they can only dismiss the modal then click the "Impressum" link. So that would not be a valid test. – Fody Jan 02 '23 at 15:18
  • 1
    If you want to click the "Impressum" link on the modal itself, that can be done but it opens a new tab. I can add some code that does that. – Fody Jan 02 '23 at 15:20
  • I think it has something to do with the dom on this page. I found this here, maybe makes the code better but do not solve the problem cy.contains("a", "impressum", { matchCase: false, includeShadowDom: true, }).each(($el) => { debugger; }); – Al Kativo Jan 02 '23 at 21:56