DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for E2E Testing with TestCafe | Multi-browser Testing
Christian Vasquez
Christian Vasquez

Posted on • Updated on

E2E Testing with TestCafe | Multi-browser Testing

On Part 2 we learned how to run tests in parallel, but we only did it by using the Chrome browser.

Now we are going to run our tests in both Chrome and Firefox.

Requirements

  • Install Firefox driver (known as geckodriver).

Installing Firefox driver

In order to install the geckodriver, we'll need to execute the following command in our CMD or Terminal:

npm install -g geckodriver
Enter fullscreen mode Exit fullscreen mode

Check your geckodriver version by also running:

geckodriver --version
Enter fullscreen mode Exit fullscreen mode

Mine is 0.19.1 as I'm writing this post.

Running Chrome and Firefox

To start, let's run only 1 instance of Chrome and 1 instance of Firefox at a time with this command:

testcafe chrome,firefox tests/devto.js
Enter fullscreen mode Exit fullscreen mode

Make sure to not add any whitespace after the comma that separates chrome and firefox in the command above.

This will make both of your browsers startup and run our 2 tests individually in each browser respectively.

Great!

This will allow us to verify that our application is working correctly in multiple browsers without having to run a command for each and every browser we want to try out.

What about more than 2 browsers? You can do that, as long as you have the required drivers and the browser itself installed on your machine (like Safari/Internet Explorer that are exclusives to macOS/Windows respectively) you will be good to go.

Let's take it to the next level

If you followed the instructions in Part 2, you may be able to remember the -c # command we can add to testcafe so it runs multiple windows of the same browser to split the work between them.

Well, now let's do that with both Chrome and Firefox!

Since we already have our geckodriver installed by now, we can go ahead and use:

testcafe -c 2 chrome,firefox tests/devto.js
Enter fullscreen mode Exit fullscreen mode

This should open 2 Chrome windows and 2 Firefox windows.

Did all the test pass on both browsers?

Awesome \o/

Now I think you are starting to get the hang of how to use some really useful commands for testcafe.

These are the same ones that you will be using when setting up your CI or Continuous Integration systems (like Jenkins, CircleCI, etc) in order to run these test automatically every X amount of time.

On Part 4 we will refactor our project in order to support the Page Object Model Design Pattern, which will help us clean up our code, make it more expressive and reusable through out all our tests.

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.