Cypress Running Test Scenarios in Cypress Estimated reading: 3 minutes 259 views Before diving into the methods of running tests, let’s first expand our test suite with a few additional scenarios. These new tests will help us better understand the different ways Cypress can be utilized.Enhancing the Home Screen ScenariosIn this guide we’ll be going through the application, checking the links in the header menu like Products, Login, Cart. These are essential user flows, and ensuring they work correctly is vital for a seamless user experience. For instance, when the user clicks on the Products link, the application should navigate to the Products page, where the title Performance Sneakers should be visible. Similarly, clicking the login icon should direct the user to the sign-in page, with the Sign In button present and ready for interaction. The same applies to the Cart icon, leading the user to a Shopping Cart page, confirming the presence of the Shopping Cart title.Below is the enhanced version of the previous home screen test file, which includes test the new use cases mentioned above.Enhanced Home Screen Scenariosit('should navigate to the Products page when the products link is clicked', () => { cy.get('flt-semantics[aria-label="Products"]') .should('be.visible') .focus() .click({ force: true }); cy.url().should('include', '/products'); cy.wait(3000); const productsPageTitle = createMultilineSelector('Performance Sneakers'); cy.get(productsPageTitle).should('be.visible'); }); it('should navigate to the Login page when the login icon is clicked', () => { cy.get('flt-semantics[aria-label="login-icon"]') .should('be.visible') .focus() .click({ force: true }); cy.url().should('include', '/sign-in'); cy.get('flt-semantics[aria-label="Sign In"]').should('exist'); }); it('should navigate to the Cart page when the cart icon is clicked', () => { cy.get('flt-semantics[aria-label="cart-icon"]') .should('be.visible') .focus() .click({ force: true }); cy.url().should('include', '/cart'); const shoppingCartTitle = createMultilineSelector('Shopping Cart'); cy.get(shoppingCartTitle).should('be.visible'); });Running Test Using: Cypress RunNow that we’ve expanded our test suite, we can explore different ways to run these tests in Cypress. One approach is using the Cypress run command. This command allows you to run your tests in headless mode, meaning the tests execute without opening a browser window. This method is particularly useful for integrating tests into CI/CD pipelines where you need the tests to run automatically without manual intervention.cypress runnpx cypress run --spec cypress/e2e/home/home-advance.cy.js Cypress Testing Running In Headless ModeRunning Test Using: Cypress OpenAlternatively, you can use the npx cypress open command. This command opens the Cypress Test Runner in a graphical interface, allowing you to manually select and run tests. It’s an excellent way to visually interact with your tests and see them run in real-time, which can be particularly useful during the development phase when debugging issues.cypress opennpx cypress open Choosing E2E Testing To Start Cypress Test Browsers Available To Run Test On List of Cypress Tests To Choose From Cypress Test Runner With A Passed TestRunning Test Using: package.jsonFor convenience, you might want to add commands directly into your package.json file. This allows you to run specific test scripts or open the Cypress Test Runner with a single command.package.json"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "all-e2e-gui": "npx cypress open --e2e", "home-test-headless": "npx cypress run --spec \"cypress/e2e/home/home-advance.cy.js\"" }, Viewing the package.json file. To view the Run Script | Debug Script options, hover your mouse over the script name and it will display. all-e2e-gui : npx cypress open --e2e - This gives you the ability to launch the Test Runner directly from the terminal. home-test-headless: npx cypress run --spec \"cypress/e2e/home/home-advance.cy.js\ - This is to run your home screen tests in headless mode, ensuring that you can quickly execute these tests without needing to manually input commands each time.ConclusionRunning test scenarios in Cypress is a seamless experience, thanks to its versatility in execution methods. By enhancing your test scenarios and leveraging different ways to execute them, you can ensure that your testing process is both efficient and effective. In the next guide you learn about Connecting Your Cypress Project To Cypress Cloud!Tagged:Cypress Cypress - Previous Setting Up a Reliable and Scalable Test Suite In Cypress Next - Cypress Connecting Cypress Project to Cypress Cloud
