Thoroughly testing a website that you have created is just as important as developing it.
Let’s say your company has created an e-commerce website. If you just tested the “Buy Now” button for the electronics category and it worked, you might think that it is working for all other categories as well. What if you later found out that a glitch is preventing the users from clicking on the “Buy Now” button for all products under the fitness category? Something like this is definitely going to put a dent in the revenues of the e-commerce company. It is not just about the revenues either; it also affects the reputation of the company. Users may entirely avoid visiting your website in favor of the competition.
Developers and companies sometimes avoid thoroughly testing their website because of two main constraints: time and money. Even if you have run all possible tests for your website on a single device, there is no guarantee that it will work on every other device as well. There are a lot of factors like browser, operating system, and screen size that need to be taken into account. Moreover, new devices with different screen sizes and capabilities keep popping up. Testing on over a thousand combinations of browsers, operating systems, and screen sizes is also going to be a time-consuming process. As a result, many companies don’t test their websites as thoroughly as they should.
CrossBrowserTesting can solve both these problems very elegantly. This service allows you to run automated tests on over 1,500 real desktop and mobile devices without ever leaving the comfort of your main development browser. The debugging happens remotely, but you can interact with websites exactly as a real user would. The process is no longer going to be as time-consuming as it used to be because you will be able to run all these tests in parallel.
This tutorial will help you get started with CrossBrowserTesting and show you how to run automated tests on thousands of devices in parallel. You should sign up for a free trial to follow the rest of the tutorial.
Automate Tests Using Mocha and Selenium WebDriver
Mocha is feature-rich and is one of the most popular asynchronous JavaScript testing frameworks for Node.js. It allows you to run multiple tests serially, resulting in accurate reporting and mapping of uncaught exceptions to correct test cases. The framework provides us with before, after, beforeEach, and afterEach hooks. You can use these hooks to set up some preconditions for the tests and clean up the environment after running any test.
While Mocha can help you write tests, you will need the help of an assertion library to check if the results of a test are what you expect them to be. We are going to use Chai in this tutorial. The assertion library is very flexible and allows you to choose an interface of your choice for testing the results. It is up to you to use should(), expect(), or assert() style assertions.
Mocha and Chai can be used to run all kinds of tests and check the resulting values. If you need to perform tests like checking if an array contains a specific element, these two tools will be sufficient. However, we are interested in performing more sophisticated tests like checking if a login attempt was successful or if the users are able to update their usernames, etc. This requires us to install Selenium WebDriver. With Selenium WebDriver, we will be able to automate a lot of things, from clicking on links and buttons to filling out a form.
Once you have a basic understanding of these tools, the hard part is over. Writing automated tests for CrossBrowserTesting is easy. I am assuming you have already have Node.js installed.
Move to your project directory and run the following commands:
npm install mocha --save-dev npm install chai --save-dev npm install selenium-webdriver --save-dev
Once all the packages have been installed, create a folder named test inside your project folder. This folder will contain all our test files. For now, create a file named github.js inside the test folder. Write the following code inside github.js.
var webdriver = require('selenium-webdriver');
var assert = require('chai').assert;
var remoteHub = 'http://hub.crossbrowsertesting.com:80/wd/hub';
var username = '[email protected]';
var authkey = 'yourAuthKey';
var caps = {
name: 'GitHub Search',
build: '1.0.0',
browserName: 'MicrosoftEdge',
version: '15',
platform: 'Windows 10',
screen_resolution: '1366x768',
record_video: 'true',
record_network: 'true',
username: username,
password: authkey
};
describe("Searching GitHub for Mocha", function () {
this.timeout(5 * 1000 * 60);
var driver = new webdriver.Builder()
.usingServer(remoteHub)
.withCapabilities(caps)
.build();
before(function setupWebdriver(done) {
driver.get("https://github.com/search/advanced").then(done)
});
it("Mochajs Should be the Top Result", function (done) {
var inputField = driver.findElement(webdriver.By.css(".search-form-fluid .search-page-input"));
inputField.click()
.then(function () {
inputField.sendKeys("Mocha");
});
driver.findElement(webdriver.By.css("#search_form button")).click()
.then(function () {
return driver.wait(webdriver.until.elementLocated(webdriver.By.css(".repo-list h3 a")), 10000)
})
.then(function (element) {
return element.getText();
})
.then(function (text) {
assert.deepEqual(text, "mochajs/mocha");
})
.then(done);
});
it("Should Show a Sign Up Prompt after Loading the Repository Page", function (done) {
driver.findElement(webdriver.By.css(".repo-list h3 a")).click()
.then(function () {
return driver.wait(webdriver.until.elementLocated(webdriver.By.css(".signup-prompt h3.pt-2")), 10000)
})
.then(function (element) {
return element.getText();
})
.then(function (text) {
assert.deepEqual(text, "Join GitHub today");
});
driver.findElement(webdriver.By.css(".signup-prompt form button")).click()
.then(done);
});
after(function quitWebdriver(done) {
driver.quit()
.then(done);
});
});
In the above code, you should replace [email protected] with the email address that you used to sign up for your free trial. Similarly, you will have to get your own authorization key from the account page. Copy that key and paste it in place of yourAuthKey.
The caps object is used to specify different configuration options to run the test. You can give your test a name and a build number in order to identify it. The browserName property is used to specify the name of the browser in which you want to run the tests. You can also specify a version for the browser, but it is optional. When nothing is specified, the latest browser version is used.
You can read about all the properties and their valid values in the article titled Selenium automation capabilities. You should read that page thoroughly in order to take full advantage of all the Selenium automated testing features. For your ease of use, CrossBrowserTesting also provides a capabilities configurator on the automation homepage.
After setting appropriate values for our test parameters, we can write the tests that we want to run. Each set of tests that you want to run is enclosed inside a describe block. Inside the describe block, we have set a timeout for different tests and created a webdriver object that will be accessed by each test in the block.
In the next step, we have used the before hook to access the GitHub search page before running the tests inside the it blocks. The code inside before will run only once, which is what I want to do in my case. However, if you want to search for a new term after each successful test, you will have to go back to the search page again and again. In such situations, using a beforeEach hook makes more sense. You can use this hook to reset any data like cookies that you don’t want to persist between sessions.
The actual test goes inside the it blocks. In the first test, we identify the input field using a CSS selector and then set its value to “Mocha”. After that, we click on the search button and wait until the driver can locate a link identified by the selector .repo-list h3 a. We check the text inside that element to see if it matches mochajs/mocha. The test inside the second it block continues from the first test and clicks on the link to visit the GitHub repository.
The code inside the after block is executed after we have run the tests inside all it blocks. Make sure that you call driver.quit() inside the after block, otherwise the session will remain open for 10 minutes by default.
You might want to take snapshots at various stages during your tests to share the results with others. This can be done by invoking the API. More information related to this topic can be found in the CrossBrowserTesting post about running automated browser tests with Selenium and JavaScript.
After creating the above test file, you can run the tests on the device and browser of your choice by entering the following command in the console from inside the project directory:
mocha test/github.js
If everything worked as expected, you will be able to see the test results inside your CrossBrowserTesting account here. I have downloaded the video that was created after I ran this test with my account. You should see something similar as well.
Automate Tests Using Mocha and WebdriverIO
The good thing about CrossBrowserTesting is that you can integrate it easily with your favorite tools to help you write tests quickly and use frameworks that your team is already familiar with.
In this section, we will write some tests using WebdriverIO. Basically, it just sends requests to a Selenium server and handles the response. The framework lets you write asynchronous commands synchronously so that you don’t have to worry about promises and racing conditions. You can read the API docs to get more information about the framework.
Let’s start writing our tests now. This time, we will try to log into an account that I have created on Pixabay. We will knowingly provide wrong credentials the first time to test if the website lets us in. Next time, we will use the right credentials and verify that we have been logged in.
Before proceeding, you will have to install WebdriverIO by running the following command:
npm install webdriverio --save-dev
Now create a file inside the test folder and name it pixabay.js. The file should contain the following code:
var webdriverio = require('webdriverio');
var assert = require('chai').assert;
var username = '[email protected]';
var authkey = 'yourAuthKey';
var devices = [{
browserName: 'Chrome',
platform: 'Windows 10',
},
{
browserName: 'Firefox',
platform: 'Windows 7',
},
{
browserName: 'Internet Explorer',
platform: 'Windows 7 64-Bit',
},
{
browserName: 'Safari',
platform: 'Mac OSX 10.9',
}
];
devices.forEach(function (device) {
var options = {
desiredCapabilities: {
name: 'Pixabay Log In Test (Multiple Devices)',
build: '1.0',
platform: device.platform,
browserName: device.browserName,
screen_resolution: '1366x768',
record_video: 'true',
record_network: 'true'
},
host: "hub.crossbrowsertesting.com",
port: 80,
user: username,
key: authkey
}
describe('Logging Into Pixabay', function () {
this.timeout(5 * 60 * 1000);
var client;
before(function () {
client = webdriverio.remote(options);
return client.init();
});
it('Wrong Credentials Should Prevent Log In', function () {
return client
.url('https://pixabay.com/en/accounts/login/')
.setValue('#id_username', 'pixa_username')
.setValue('#id_password', 'wrong_pixa_password')
.click('#sign_in_out input.pure-button')
.getText('ul.errorlist li')
.then(function (result) {
assert.equal(result, 'Please enter a correct username and password. Note that both fields may be case-sensitive.');
});
});
it('Should be Able to Log In with Right Credentials', function () {
return client
.url('https://pixabay.com/en/accounts/login/')
.setValue('#id_username', 'pixa_username')
.setValue('#id_password', 'correct_pixa_password')
.click('#sign_in_out input.pure-button')
.getText('#my_images a.pure-button')
.then(function (result) {
assert.equal(result, 'Upload images');
});
});
after(function () {
return client.end();
});
});
});
After running the code in the previous section, this should look very familiar. Just like the previous example, replace [email protected] and yourAuthKey with your CrossBrowserTesting email address and authentication key.
To test the login page, you can either create your own Pixabay account or try logging into some other websites. Just keep in mind that you should able to select the right input fields and buttons using different selectors.
One important difference this time is that we have created an array of configuration objects, and we can loop over each of them to run the same tests on multiple devices. This can save you and your team a lot of time. All you have to do is write the tests once and then run them on as many devices as you want. CrossBrowserTesting allows you to view video recordings of all your automated tests. This way you can easily see what went wrong with a particular device and browser.
Final Thoughts
The ability to test your website on over 1,500 different devices remotely is amazing. You no longer have to worry about losing customers because your website was not working as expected on a device that you forgot to or could not test. The large number of devices provided by CrossBrowserTesting cover almost every device and browser combination that your customers might use. Not only that, but you also get rid of the huge cost of maintaining so many devices.
I have created some basic automation tests here to help you get started with CrossBrowserTesting. Once you have a good grasp of the fundamentals, you will be able to run all kinds of tests, from filling out large forms to visiting one product page after another. Since the tests are automated and you can run them in parallel, you also save a lot of time, which can be put into making your main product even better.
You can sign up for the service for free, so give it a try and learn about the different features that make it a better and more cost-effective option than the competition. If things work out, you or your company will end of saving thousands of dollars and hundreds of valuable hours with the help of CrossBrowserTesting.
Powered by WPeMatico
