everyone! I would really appreciate some help regarding the following issue I encountered during a website test.
So, I’m forwarding the code containing the exemplary working steps, finishing with clicking the Add to Basket button.
Steps after that should consider that a cart modal appears, and Cypress should click the Proceed to Checkout button. This is where the issue appears. No matter what I’ve tried Cypress couldn’t find the cart modal on the page. I get various issues like CSS not visible, opacity 0 and so. While manually testing the page, I’ve noticed that the cart modal disappears pretty fast after clicking on the Add to Basket button so I guess it can be a possible reason why Cypress can’t find it.
I have referred to a blog article written by Gleb Bahmutov https://glebbahmutov.com/blog/flaky-iframe-test/, but I couldn’t really find the answer there, and I’m not that experienced in test automation, to be honest 🙂
Cypress.on('uncaught:exception', (err, runnable) => {
// Return false to prevent the test from failing
return false;
});
describe('Iqos Shop Test', () => {
it('Add a product in the basket and proceed to checkout', () => {
// Visit the specified URL
cy.visit('https://www.iqos.com/gb/en/home.html?gr=false');
// Select the month from the dropdown
cy.get('#dropdownMonths')
.parent().click();
cy.get('#sag-month-01').click({ force: true });
// Select the year from the dropdown
cy.get('#dropdownYears')
.parent().click();
cy.get('#sagyear1999').click({ force: true });
// Click the confirm button
cy.get('span.sav-btn-text:contains("Confirm")').click();
// Click on the promotion button on the main banner
cy.get('.btn-white-turquoise').eq(0).click();
// Buy IQOS ILUMA ONE Starter Kit
cy.get('a[href="/gb/en/shop/iqos-iluma-one-starter-kit.html"]')
.should('be.visible')
.eq(0)
.click();
// click on the "Add to cart" button
cy.get('section.product-info__wrapper')
.find('div.product-detail__react--container')
.should('be.visible')
.wait(200)
.within(() => {
cy.contains('button', 'Add to basket').should('be.visible').click({ force: true })
});
});
});
I’ve tried improvising a code like this but it doesn’t work:
// Wait for the Minicart to appear and be visible
cy.get('div#minicart.minicart__container', { timeout: 10000 })
.should('be.Visible')
.eq(0)
.wait(200)
.click({ force: true })
.then($minicart => {
// Log the visibility state
cy.log('Minicart visibility:', $minicart.is(':visible'));
// Ensure the Minicart is indeed visible
cy.wrap($minicart).eq(0).within(() => {
// Click on the 'Proceed to checkout' button if it exists
cy.contains('a.minicart__one-click.global-btn.btn--dark', 'Proceed to checkout', { timeout: 10000 })
.should('be.visible')
.click({ force: true });
No Tools No Craft is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.