Sample project to perform web automated tests on the Orange HRM application.
In Day 1, we'll set up your Cypress project with Node.js and JavaScript, create basic tests in Cypress, and configure the base URL in cypress.config.js
-
To begin, initialize your project with npm:
npm init
-
Next, add Cypress as a development dependency: ````npm install cypress --save-dev```
-
Run Cypress using the following command:
./node_modules/.bin/cypress open
ORnpx cypress open
This will open the Cypress Test Runner, where you can manage and run your tests. Select the "e2e" module or any other relevant module.
We've provided a sample test in the loginOrange.cy.js
file. This test covers basic login functionality, but you can add more tests based on your application's features.
We use the cypress.config.js
file to set up the base URL for our application. This makes it easier to write test cases with relative URLs.
In Cypress, you can easily check if hyperlinks and images on your application are working as expected. Use the Cypress commands to ensure they are not broken.
In Day 2 of our series, we dive deeper into Cypress and learn essential techniques to improve our test suite.
We introduced the beforeEach
hook to ensure that specific actions, such as opening the web application and logging in with credentials, are performed before each test within a describe
block. This ensures that our tests start with the necessary prerequisites.
We demonstrated how to capture screenshots in Cypress. This is particularly useful for debugging and documenting test failures. We also discussed how to configure Cypress to automatically take screenshots on test failures.
To keep our tests clean and avoid duplicate assets such as video or screenshots, we have enabled trashAssetsBeforeRuns: true
We explored how to enable video recording during test runs. Please note that this feature is particularly effective when running tests using cypress run
or in a cloud environment.
To enable these features, make sure to configure the appropriate options in your cypress.config.js
Welcome to Day 3 of the Cypress Learning Series! In today's session, we'll explore several essential concepts that enhance your understanding of Cypress testing. Let's dive in:
-
IntelliSense with Cypress Learn how to use IntelliSense, a powerful code editing feature, to streamline your Cypress test scripting. IntelliSense provides real-time suggestions and autocompletions, significantly improving your coding efficiency and accuracy.
-
Force Click vs. Normal Click in Cypress Discover the nuances between force click and normal click approaches in Cypress. We'll delve into the usage of
{ force: true }
with theclick()
command, enabling robust interactions even when elements are obscured or hidden by other page elements. -
Element Visibility:
.should('be.visible')
vs. Selenium'sisDisplayed()
Delve into the world of element visibility in testing. This segment compares Cypress's.should('be.visible')
command with Selenium'sisDisplayed()
method. Understand how both mechanisms ensure elements are visible and ready for interaction, resulting in more dependable and user-centric tests.
Each topic is accompanied by practical examples that vividly illustrate the discussed concepts. These examples are thoughtfully organized into separate folders for better clarity:
command.js
: A demonstration of enabling IntelliSense functionality in Cypress.BuzzCRM.cy.js
: Real-world scenarios showcasing the distinctions between force click and normal click interactions.BuzzCRM.cy.js
: A direct comparison between Cypress's.should('be.visible')
and Selenium'sisDisplayed()
for assessing element visibility.
In the BuzzCRM.cy.js
example, you'll find an insightful comparison between Cypress's .should('be.visible')
and Selenium's isDisplayed()
mechanisms concerning element visibility. This comparison underscores how Cypress simplifies element interaction and visibility assertions, contributing to more efficient testing practices.
Feel free to explore the examples and comparisons provided in this session to deepen your understanding of Cypress testing techniques.
-
Aliasing Elements in Cypress Discover the power of aliasing in Cypress. Learn how to create and utilize aliases to simplify interactions and assertions across your test scripts. Alias helps create cleaner and more maintainable test code.
-
Using Fixtures for Test Data Master the art of managing test data with fixtures. Explore how to load external data from fixture files into your tests, keeping your test data organized, separate, and easy to update.
-
Generating Comprehensive HTML Reports with cypress-mochawesome-reporter Elevate your test reporting with the cypress-mochawesome-reporter plugin. Experience visually-rich HTML reports that include screenshots and recordings, making it a valuable resource for stakeholders to understand test outcomes.
Each topic is accompanied by practical examples that showcase the concepts in action. You'll find code snippets, step-by-step guides, and explanations to help you understand and apply these techniques effectively:
aliasing
: Hands-on examples demonstrating the benefits of aliasing in Cypress tests.fixture
: Practical scenarios illustrating the usage of fixtures to manage test data efficiently.cypress-mochawesome-reporter
: Guide on integrating cypress-mochawesome-reporter for stunning HTML reports with screenshots and recordings.
- Retry Execution
Cypress allows retrying failed tests to improve the stability of test execution. We've configured the retry attempts for both
cypress run
andcypress open
modes in thecypress.config.js
file:
{
"retries": {
// Configure retry attempts for `cypress run`
// Default is 0
"runMode": 2,
// Configure retry attempts for `cypress open`
// Default is 0
"openMode": 2
}
}
- Cross-Browser Testing
Easily run your tests across different browsers using the --browser flag. For instance, to run tests in Firefox:
npx cypress run --browser firefox --spec "cypress/e2e/CypressDay1/loginOrange.cy.js"
- Headless Mode Execution
Improve test execution speed by running tests in headless mode using the --headless flag:
npx cypress run --headless
- Parallel Execution (Cypress Cloud)
Achieve even faster test execution by leveraging parallel execution in Cypress Cloud. Unfortunately, this feature requires Cypress Cloud:
npx cypress run --parallel
Contributions are welcome! If you have suggestions or improvements for this project, feel free to submit issues or pull requests.
Stay tuned for more exciting updates as we continue to explore the world of Cypress and automated testing!
Happy testing! ๐๐๐