OPEN SOURCE TOOL - BrowserStack

What Is BrowserStack?
Browser Stack is a cloud-based testing tool. Using this tool, developers and testers can do the
cross-browser testing of various web and mobile applications in different web browsers.

What Is Cross Browser Testing?

Cross-browser testing is functional testing. We perform this testing to check if the application is
working as expected or not in different web browsers for the different operating systems. Here,
we can run the test cases manually or by doing automation by specifying the various browsers
in the automation scripts.

Why BrowserStack?
In real-time, it is difficult to test an application in different browsers using multiple operating
systems, with varying versions.

It will cost a lot to buy many computer machines to install different operating systems. It is even
more difficult to buy all the android and iOS mobile devices that are available in the market
today. Due to this reason, it is not practical to buy and set up all the devices.

Thus, we go with the BrowserStack to avoid the complexity of switching between the operating
systems, browsers, and different versions.

When it comes to mobile application testing, we can avoid buying all the mobile devices that are
available today. Browser Stack is very flexible and scalable. We can test anywhere and anytime
with the help of Browser Stack.

We can use Browser Stack as a remote lab and can use this as Real Desktop Browsers. It gives
us free Javascript unit tests and supports 750 configurations. There is no set up required for
using Browser Stack. We can use it directly on any independent machine by using the Browser
Stack URL and its login credentials.
BrowserStack History
BrowserStack was founded by Ritesh Arora and Nakul Aggarwal in Mumbai, India in the year
2011. It has around 25000 paid users and 2000000 registered users across 135 countries. Now
many companies rely on Browser Stack for web and mobile application testing.

Features of BrowserStack
 Cross-browser testing with different browsers on different operating systems.
 Native app testing on mobile.
 Hybrid application testing.
 Automate web and mobile applications.
Testing The Web Application
1) Sign up with BrowserStack.

2) Log in to your account.

3) Choose the live interactive cross-browser testing option from the products dropdown.
4) You will see the OS list on the left side of the page. We have android, iOS, windows phone,
windows 10, windows 8, Windows XP, Mac and much more.

5) Choose any OS from the list. You will be able to see a list of browsers with different versions.
We can see browsers like chrome, Mozilla Firefox, IE, opera, safari, etc. with different versions
like Chrome 75, Chrome 74, Chrome 73, IE 11, IE 10, etc.
6) Choose a particular browser of any version. The browser will be open. Enter the URL of the
application. Start testing the application in the same way in which you do in the real system
browsers.

Using Browser Stack Key Functions While Testing The

Application
If you wish to choose any other browser, then click on the switch browser option. This will
navigate you to the dashboard screen, where you can choose the other browser for testing.

If you wish to test the application on a different resolution, then click on the resolution icon,
where a list of the available resolution will appear, you can select the required one and continue
with testing.

Once you are done with testing in a particular browser, then click on the Stop session, and it will
take you to the dashboard screen.
Creating Bug From BrowserStack
Click on Report a Bug Option. You will see an option box to highlight the issue on the page.
You can highlight the issue by using different options like rectangle, circle, pencil, etc.
In addition to that, you can see the mode of option to report a bug, like where you wish to report
a bug, by using Jira, Trello, GitHub, Slack or through by the email, or if you wish to download
the issue page, etc. In this way, you can choose any option from the above list and proceed
further to report a bug.
Testing The Mobile Application In Mobile Browsers
Choose the live interactive cross-browser testing option from the products dropdown. You will
see the list of OS on the left side of the page. Click on the android option from that list. You can
see the list of Android devices like Samsung, Motorola, Google, one plus, etc.

Mouseover on the device which you wish to test and you will be able to see the browsers like
chrome, Mozilla Firefox, Safari, UC browser, etc. Choose the Browser and the selected browser
will open.

Enter the URL of the application and start testing how you do it in the real system browser.
Testing Of Native Mobile Application In BrowserStack
Sign up to the Browser Stack account and Log in with the account. Choose the App Live –
Interactive native and hybrid app testing option from the products dropdown.

You will see the 3 main tabs there i.e. to upload the app, list of Android devices and the list of
iOS devices.

Uploading The App

Click on the upload app button and a system dialog window will be open.

Go to the app folder, choose the App which you want to test and the app will be uploaded
successfully. You will be able to see the app under the uploaded apps section. There we can
upload the apps up to the size of 500 MB.

We can upload the app in other ways as well. Choose the App Live interactive native and
hybrid app testing option from the products drop-down, and select the android real device or
iOS real device tab.
Choose any device and it will open. Click on the play store. Sign in with the account and search
the app which you wish to test. Download & install the app and Start Testing the application.

Similarly, we can upload the apps in many more ways i.e. by sync with the app center, by sync
with hockeyapp, by installing with testflight, by installing with the app store, or by installing with
the play store.
Deleting The App

Click on the delete icon and you will see the checkbox at each app. Select the checkbox and
click on the delete link and it will delete the uploaded app automatically after the completion of
60 days from the date of upload.

Now observe the Android real devices Tab, click on this tab, and you will see the list of Android
devices like Samsung, Motorola, Google, one plus, etc. with different device models. You can
see the OS version and screen size in each model.

Now observe the iOS real devices Tab and click on this tab, you will see the list of iOS devices
like iPhone and iPad with different device models. You can see the OS version and screen size
in each model.

Click on any android or iOS device for testing. The particular Device will be open and the
application will launch. Start testing how you do in the real device.
Using Browser Stack Key Functions While Native App
Testing
Click on the Switch device option, if you wish to switch the device. Click on the Stop session
option once you are done with testing in a particular device, and it will navigate to the dashboard
page. Click on settings to choose the session time out and monitor size.

We can create the bug by clicking on the Report a bug option, just like what we discussed in
the above web testing Section. Now, look at the web tool kit menu, which has some more
options to operate the device feasibly and test the application.
Click on the Rotate Device option to rotate the device horizontally or vertically. Click on
the install app to install the new application. Click on the kill app to just close the app and not
the device. Click on Change language to change the language for testing. Click on device
info to check the complete device information.
Automate The Website Using Selenium Scripts
Let’s write the Selenium scripts and do automation testing in the Browser Stack. Download and
install the latest version of Java. Download and install the latest version of Eclipse or another
IDE.

We need to get the user name and access key from the Browser Stack. To get this, log in with
the browser credentials, go-to products and click on Automate. Observe the user name and
access key at the left-hand side. Note down the username and password.
Open the Eclipse IDE. Create the Java project, create the package, create the class file and add
all the required Selenium jar files to the project. Write the variables for the user name and
access key. Pass the URL, user name and password. Use annotations. Create the method.

Set the desired capabilities to see the logs. We are setting the desired capabilities to tell the
web driver, to choose the mentioned operating system, browser, and browser version. Create
the object for the web driver, get the URL to open the website. Write the wait implicit commands
to wait until the application launch.

Write the code for testing commands like, Get the URL, to check the expected URL using
assertion and other functionalities like, click, navigation, enter data and much more.

Run the script. Observe the automate tab. Check the test log of all the test steps and see the
visual logs to see the screenshots of the website. Observe the console logs and network logs
for other information.

Public class testbrowserstack

{
Public static String Username =”anand”;
Public static String accesskey =”anandaccess”;
public static final String URL = "https://" + username + ":" + accesskey + "
@hub-cloud.browserstack.com/wd/hub";

public static void main(String[] args) throws Exception {

DesiredCapabilities caps = new DesiredCapabilities();
caps.setCapability("browserName", "iPhone");
caps.setCapability("device", "iPhone X");
caps.setCapability("realMobile", "true");
caps.setCapability("os_version", "11");
caps.setCapability("name", "Bstack-[Java] Sample Test");

WebDriver driver = new RemoteWebDriver(new URL(URL), caps);

driver.get("http://www.google.com");
WebElement element = driver.findElement(By.name("q"));

element.sendKeys("BrowserStack");
element.submit();

System.out.println(driver.getTitle());
driver.quit();

}
Advantages Of BrowserStack Testing
1. We can test all the major browsers from a single control point.
2. We can test the compatibility of the backward/older version of the browsers.
3. It supports both Manual and Automation testing.
4. We can test all the devices and browsers that are currently available in the market.
5. We can test the application in different resolutions.

Disadvantages Of BrowserStack Testing

1. Response time is not as good as a locally installed virtual machine.
2. Browser Stack is not open-source.
3. Some bugs which we can find on real devices cannot be identified.

Conclusion
Using BrowserStack we can perform complete testing without the dependencies of installing any
virtual machine. Browser Stack is more flexible & reliable to test and it indeed saves money and
time.

It is like one big roof for all the devices, operating systems, browsers, and all with different
versions. Hence, we can test all kinds of applications with Browser Stack.

Browser Stack can run on 200+ browsers and 40+ mobile devices. It can run tests on a cloud
service. It is not an open-source platform. You need to pay to buy the license based on the plan
you take and on the test which you want to run.
 MANUAL TOOL – FIREBUG
What is Firebug?
Firebug is a powerful web development tool and browser extension that provides a
comprehensive set of features for debugging, inspecting, and analyzing web pages in real-time.
It was initially developed for the Firefox browser and quickly became a go-to tool for web
developers due to its user-friendly interface and robust functionality.

Installing Firebug

To install Firebug, follow these simple steps:

 Open your Firefox browser and visit the Firefox Add-ons website.
 In the search bar, type “Firebug” to find the Firebug extension.
 Locate the Firebug extension from the search results and click on the “Add to Firefox”
option.
 Follow the installation prompts provided, and once the installation is complete, you will
notice the Firebug icon appearing in the toolbar of your Firefox browser.

Getting Started with Firebug

Launching Firebug:
After installing Firebug, you can initiate it either by selecting the Firebug icon in the toolbar of
your web browser or by utilizing the keyboard shortcut (F12 or Ctrl + F12). Upon activation,
Firebug will open an interface panel positioned at the bottom or right side of your browser
window.

Firebug Interface Overview:

The Firebug interface consists of several panels, each serving a specific purpose in web
development. Let’s explore some of the key panels:

 HTML Panel: Within this panel, you gain the capability to examine and modify
the HTML structure of a web page. It enables you to choose specific HTML elements
 and access their properties, attributes, and corresponding styles for viewing and
potential modification.
 CSS Panel: The CSS panel offers a robust method to examine and edit the CSS
properties of elements. It allows you to experiment with various styles, apply real-time
modifications, and observe instant results. This provides a dynamic and interactive
approach to CSS customization.
 Script Panel: The Script panel is used for debugging JavaScript code. It allows you to
set breakpoints, monitor JavaScript errors, analyze variables and scopes, and step
through the code execution.

Inspecting HTML and CSS

 Selecting Elements:
With Firebug, the process of selecting and inspecting HTML elements on a web page
becomes effortless. By clicking on an element in the HTML panel, Firebug instantly
highlights it on the page, allowing for a clear understanding of the HTML structure and
hierarchy of elements.
 Modifying CSS Properties:
The CSS panel in Firebug empowers you to modify CSS properties in real-time. By
selecting an element and adjusting its styles, you can experiment with different design
changes and observe the impact instantly. This feature is immensely useful for fine-
tuning the appearance of a webpage.
 Editing HTML on the Fly:
Firebug enables real-time editing of the HTML code of a webpage. Within the HTML
panel, you can swiftly make modifications, and the webpage will instantly update
accordingly. This feature is valuable for testing alterations or resolving problems without
impacting the original source code.

Debugging JavaScript
Firebug offers robust debugging capabilities for JavaScript, aiding developers in identifying and
resolving issues in their code.

Setting Breakpoints: Setting breakpoints in Firebug enables you to pause the execution of
JavaScript code at specific lines. By placing breakpoints strategically, you can halt the code
execution and examine variables, step through the code, and understand the flow of your
JavaScript program.

Monitoring JavaScript Errors: Firebug provides a console panel where you can monitor
JavaScript errors that occur on a web page. Any syntax errors, runtime exceptions, or issues
with external scripts will be reported in the console, making it easier to identify and resolve
them.

Analyzing Variables and Scopes: The Script panel in Firebug allows you to analyze variables
and scopes in your JavaScript code. You can view the current values of variables, monitor their
changes during runtime, and inspect the scope chain. This information is invaluable when
debugging complex JavaScript applications.

Network Monitoring and Performance Analysis

Analyzing Network Requests
One of the crucial features of Firebug is its ability to monitor and analyze network requests
made by a web page. By utilizing the network panel, you can gain valuable insights into the
performance and behavior of your website.
When you load a webpage, Firebug captures and displays all the network requests made by
that page, including HTTP requests for HTML, CSS, JavaScript, images, and other resources.
Each request is listed in the Network panel, providing detailed information such as the URL,
response time, status code, size, and headers.

By examining the network requests, you can identify potential bottlenecks and optimize the
loading time of your website. For instance, if you notice a particular resource has a long
response time, you can investigate the issue and take steps to improve its efficiency.

Monitoring Load Times

Firebug also offers a convenient way to monitor the load times of your web page. The Net panel
provides a timeline that visually represents the loading process of different resources. It displays
the start and end times of each request, allowing you to identify any delays or performance
issues.

Additionally, Firebug calculates and displays the overall load time of the web page. This metric
is crucial for evaluating the user experience and making necessary optimizations. By reducing
the load time, you can enhance the responsiveness and usability of your website, leading to
better user satisfaction.

Optimizing Page Performance

Firebug goes beyond monitoring and analysis; it empowers you to optimize the performance of
your web page. By leveraging the insights gained from network requests and load time
monitoring, you can identify areas that require improvement and implement optimizations
accordingly.

For instance, Firebug can help you minimize the size of CSS and JavaScript files by identifying
unused code or suggesting compression techniques. It can also highlight excessive HTTP
requests and guide you in combining or minifying resources to reduce the number of round trips
to the server.
Advanced Firebug Features

JavaScript Profiling:
Firebug offers a JavaScript profiler that allows you to analyze the performance of your
JavaScript code. Profiling helps you identify bottlenecks, optimize execution time, and improve
overall responsiveness.

With the JavaScript profiler, you can measure the execution time of different functions and
identify which parts of your code consume the most resources. This information enables you to
focus your optimization efforts where they matter the most, resulting in faster and more efficient
JavaScript execution.

Cross-Browser Compatibility:
While Firebug was initially developed for the Firefox browser, it has evolved to support other
browsers. Firebug Lite, a lightweight version of Firebug, can be used in conjunction with other
major browsers like Chrome, Safari, and Internet Explorer.

Firebug Extensions and Add-ons:

Firebug’s extensibility allows developers to enhance its capabilities further. You can find various
extensions and add-ons created by the developer community to augment Firebug’s functionality.

Firebug extensions provide additional features, such as advanced CSS editing, JavaScript
debugging enhancements, and compatibility with specific frameworks or libraries. They offer
flexibility and customization options, catering to the diverse needs of web developers.
Firebug Vs. Browser Developer Tools
The key difference between Firebug and developer tools are listed below:

Feature Firebug Browser Developer Tools

Supported Browsers Initially developed for Firefox, but Built-in tools in various
now available for Chrome browsers (Chrome, Firefox,
etc.)
User Interface Standalone panel at the bottom or Integrated directly within the
right side of the browser browser
Inspecting Elements Allows selecting and inspecting Offers similar functionality for
HTML elements inspecting elements
Modifying CSS Properties Enables real-time modification of Provides CSS editing
CSS properties capabilities
Editing HTML on the Fly Allows editing HTML code on the Offers similar functionality for
webpage editing HTML
Debugging JavaScript Provides robust debugging Offers powerful JavaScript
features for JavaScript code debugging capabilities
Network Monitoring and Allows analyzing network requests Provides similar network
Performance and monitoring load times analysis and performance tools
Additional Features Extensions and add-ons available Browser-specific features and
for enhancing functionality extensions

Conclusion
To conclude, Firebug emerges as an indispensable tool for web developers, encompassing a
comprehensive set of features to thoroughly inspect, debug, and monitor web pages. Its user-
friendly interface, combined with its powerful capabilities, positions it as an essential asset for
developers, regardless of their proficiency level.

While Firebug has been a popular choice among developers for many years, it’s worth noting
that most modern browsers now come equipped with their built-in developer tools. These
browser developer tools provide similar features and functionalities to Firebug, eliminating the
need for a separate extension. Developers can access these tools directly within their browsers,
simplifying the development process.