Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs:How to perform cross-browser resting with Testsigma? #64

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
## **Introduction**

Developers must test their products/application in a wide range of environments due to the variety of environments/browsers available on the market. So, cross-browser testing is essential to determine whether an application is functioning correctly in some browser versions; otherwise, users may not be able to use the application or product at all if they keep receiving error messages. Therefore, it is prudent to understand how any applications function in various environments before publishing them.

## What is cross-browser testing?

Cross-browser testing, as the name suggests, verifies the functionality of the website on the different common browsers that are widely used right now in the market.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xcdzz3kjr4mcb626vb0.png)



Different people prefer different browsers based on their needs. The above pie chart shows the percentage of people using various web browsers.

## Why should we perform cross-browser testing?

To verify how your web application will look on different browsers and operating systems by following the "Essential Browser or OS list". This can greatly enhance a user's experience when accessing content from various devices. This is important to do because it can have a big impact on how well people are able to use your app, especially if you want customers from around the world.

It's important to know about the issues on your clients' computers before they report them. For example, one of your customers might ask you for help if your $699 web app doesn't work in their IE 8—and that means knowing what "essential browser," "OS," and the resolution every customer uses is imperative.

It should work for most browsers and different versions.

## Who performs cross-browser testing?

Software testers and QA(Quality Assurance) engineers have traditionally been the primary groups responsible for cross-browser testing, but with [Testsigma](https://testsigma.com/), anyone can do it with the click of a button.

## How to perform cross-browser testing?

Cross-browser testing can be done either manually or programmatically. Manual cross-browser testing is very simple: you take multiple machines with different browsers installed, and then use them to test your code against each browser's released version as well as any popular developer/beta release versions that have been released. That will allow us to find errors specific only to a single platform easily—however, it is also time-consuming because we need many machines of this variety.

Automated testing can be performed using different automated tools, but for the purposes of this article, I will focus on Testsigma because it is faster and easier to use than other available options.

## Performing cross-browser testing in Testsigma

Head over to Testsigma:

- Head over to the [Testsigma official website](https://testsigma.com/signup) and create an account. You can sign up using your email ID or GitHub account.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rny7llsbrr8ip6hrqbzf.png)



- After creating an account, you will see the dashboard as shown below.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vo6u1m7ej7be8dstlci.png)



- You can create a new project by clicking on the `+` icon from your dashboard, then selecting the option to `create a new project`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5s7fquym0s47qflp65h.png)



- Give your project a name and add some details about what it is. Then, select the type of application you want to make: here I'm selecting a web application (but this could be for just about anything).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqluq3nhapjcfb1l73x8.png)



- Now, `create a test case`. You can see the icon of the test cases.
- Keep the name of the test case and the website URL that you want to do cross-browser testing on.
- Wait until it verifies the URL of the website.
- After verifying, it shows `All set`.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97lw0j57ymswgotmydd6.png)




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfk72jistw5tavml86nm.png)



- Now, create a test plan. Select the `Create Test Plan` option from the menu bar and fill in all of the relevant details.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0o619qrrhzgzigu1va0.png)



- In the test plan name field, type a name for your test plan that describes its contents or purpose. Then click `Next`.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fa27ui5ymls0z3fitjpa.png)



- Adding test suites is easy. Just click the `Add Test Suites` icon at the bottom of the page, and you'll be able to create new ones on this tab.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dmmkzlp1imhrm4ddv7z.png)



- It will redirect to this page(as shown in the image below), where you should enter a test suite name and choose your testing type. Once the information has been entered into those fields, click add then you can select any of our existing tests or create new ones according to your application


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kq5ch7xh5ipunvpu6km.png)



- Now, add the test suite to the Test Plan section.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgzv18htvywy234w24wf.png)



- Select the test suite from the “practice website”.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nk7e6b1h6e9eb5gvn5zd.png)



- Select `Next` or `Add Machine Device`. If you click Next, you will be directed to this page, as shown in the image below.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3k4sp2geuc3euzifkzo.png)



- Click on Run. You will come to a page that looks something like this:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsd37s97u8akjl8bofv1.png)



- Choose the test lab, windows, browsers, versions, and resolution.
- Then click Run Now.
- After testing, the result will be displayed.
- The website test passed in the Chrome browser.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hiddppt4hwza15c7kuhz.png)



- Let's choose Microsoft Edge. Here is its result.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7x2tuu7989otisaax613.png)



- As you can see, The test was successful.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qirwozzfmoo864evgikn.png)



- When you click on `Add Machine Device`, you will see options to select for different browsers.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42wu1uisx4usnoxy46og.png)



- When the test fails or passes, you have the option of adding an email address so that your results can be sent directly to you via email. You can click `Run Now` at any time after that to perform the test again with updated parameters if needed.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2rqbwviq2i0f4cnirru.png)



Congratulations! You have successfully completed cross-browser testing of the website.

## Conclusion

Cross-browser testing ensures that your app works on a range of browsers, operating systems, and versions. TestSigma makes it easy to do this kind of testing across multiple devices.

Testsigma performs different applications of testing. [In](http://testing.in/) a simple and easy way, we learned how to do cross-browser testing of a website. I hope you got an idea about performing cross-browser testing using Testsigma.