Key takeaways
- TestCafe needs no WebDriver, which is why a working suite is possible in half an hour.
- Automatic waiting removes most of the sleep-based flakiness beginners hit first.
- Use a public site to learn the framework, then point it at your own app.
In this article, we’ll demonstrate how to create End-to-End (E2E) UI tests for the e-commerce platform ASOS across three of their markets (UK, IT, DE) in less than 30 minutes.
Why Use TestCafe for Running Tests?
For this tutorial, we’ll be using the TestCafe framework. TestCafe is an open-source framework that evolved from a commercial product, offering several advantages over WebDriver-based frameworks:
- Simplified Setup: TestCafe eliminates the need for WebDriver, avoiding compatibility issues between WebDriver and browser versions.
- Faster Execution: Tests run significantly faster compared to WebDriver-based tests.
- Clear Error Reporting: TestCafe provides precise error messages when a test fails, unlike WebDriver-based frameworks that often offer ambiguous error messages.
- Ease of Implementation: Once the initial setup is complete, implementing tests is straightforward, providing a high return on investment (ROI).
- JavaScript-Based: TestCafe uses JavaScript, making it accessible and easy to use for front-end developers.
How to Create the Framework and Run Tests Against the E-Commerce Platform
The project for this demonstration is available at:
Note: This is a demo project for learning purposes. We are not affiliated with, funded by, or associated with the ASOS brand.
Steps to Get Started
- Clone the RepositoryOpen your terminal and run the following command to clone the repository:
git clone https://github.com/loadfocusapp/asos-testcafe-e2e - Install DependenciesNavigate to the directory where you cloned the repository and install the necessary dependencies. Ensure you have Node.js and npm installed on your machine. You can find instructions to install npm here. This demo uses Node v8.9.4 and npm v5.6.0.bashCopy code
npm install - Run the TestsYou can run the tests against different ASOS markets using the following commands:
ENV=AsosCom npm run e2e:firefox ENV=AsosDe npm run e2e:chrome ENV=AsosIt npm run e2e:safariThese commands will run the tests on the UK, DE, and IT versions of the ASOS website using Firefox, Chrome, and Safari respectively.
Need Help?
If you need assistance setting this up for your own web application, feel free to reach out.
About LoadFocus
LoadFocus is an easy-to-use cloud testing tool that requires no setup and runs directly from your browser. It helps you understand your website’s and web services’ performance, identifying potential bottlenecks before your customers do. Run a free website speed test today.
LoadFocus also offers test automation services tailored to small and medium-sized businesses.
By following this guide, you should be able to set up and run E2E tests for the ASOS e-commerce platform in multiple markets quickly and efficiently using TestCafe. Happy testing!
Frequently Asked Questions
Does TestCafe need WebDriver?
No, and that is the main reason a working suite is possible in half an hour. There is no driver binary to match against your browser version, so the usual first day of setup problems disappears.
How does TestCafe handle waiting?
It waits automatically for elements and for page loads, which removes most of the sleep based flakiness beginners hit first. You still need explicit waits for genuinely asynchronous states, but not for ordinary navigation.
Why test against a public site in a tutorial?
Because it lets you learn the framework without also fighting your own environment, test data and logins. Once the mechanics are familiar, point the same project at your own application.
