What is Browser Stack?

Browser Stack is a cloud-based cross-browser testing tool that enables developers/testers to test their websites across various browsers on different operating systems and mobile devices without requiring users to install virtual machines devices or emulators.

Why do we need Browser Stack?

We require Browser Stack for Compatibility testing i.e., compatibility test is an assessment used to ensure a software application is properly working across different browsers, operating systems (OS), and mobile devices.

Browser Stack Instance:-

In this section, we will cover the navigation to the Browser Stack page and the Creation of the Browser Stack Instance.

Prerequisites

To create a Browser Stack instance, the user should have created an Account in the Browser Stack application and should have a “Username” and “Access key”.

Browser Stack Instance:-

How to get a Username and Access Key from the browser Stack website.

1. Create an account and Sign in to the Browser Stack application.
2. Navigate to Your profile Summary wherein you will notice your Username and Access key, refer to two images from the Browser Stack Website.

Navigation in FireFlink to Browser Stack

Home icon>>Configuration>>integration>>plugin>>BrowserStack

Steps to navigate to Browser Stack page.

1. Once you log into the FireFlink, you will be navigated to the “Project Menu” section of the “All project” level.

2. In the left navigation click on the ”Config” icon as shown below the screen.

3. Next Select “Integration” from the dropdown menu as shown below.

4. Click on the “Browser Stack” icon as shown below.

5. Once the user has clicked on the “Browser Stack” icon we will be landing on the Browser Stack page.

Steps to create an instance on the Browser Stack page:-

1. To create an Instance, click on the “+ instance” button Initially when there are no Pages created. The “+ Page” button is provided at the center of the screen as shown below to create a Page.

2. Now Create popup appears as shown below.

3. Enter the Instance name, Username, and Access key, click on Create button and the page will get created. You can see the New instance created successfully banner message. Note: All the fields are mandatory.

4. You can’t create a duplicate Instance name.

5. Instance name text field will accept characters between 3 to 100.

6. The created instance will be appeared on the Browser Stack page with the Access Key in a hidden state, as shown below.

Table details on Browser Stack page: –

The table under Browser Stack contains 6 columns with column names Instance Name, Username, Access key, Created On, Created, and Actions.

• Instance Name: This column displays all the created Instance names
• Username: This column displays the Browser Stack username
• Access Key: This column displays the Browser Stack Access key and it should be in a hidden state.
• Created On: This column displays the date and time when the instance has been created.
• Created By: This column displays the username who has created the instance.
• Actions: When the user hovers the mouse under the Actions column under column, Details, Edit, and Delete icons are available.

Details of Page, Edit, & Delete.

When the mouse hovers on Instance under the action column, the Details, Edit & Delete icons are displayed as shown below.

Details of Instance: –

To view the details of the instance, click on the eye icon under the actions column. This will display the Details of the Instance created as shown below.

Attributes of Details popup:

This page consists of the details of all the attribute values that are non-editable.

• Instance Name: This attribute displays the Name of the Instance which is given while creating a Browser Stack instance. When the name of the Instance is updated, the updated name is shown.
• User Name: This attribute displays the User Name of the Instance which is given while creating a Browser Stack instance. When the User Name of the Instance is updated, the updated User Name is shown.
• Access Key: This attribute displays the Access Key of the Instance which is given while creating a Browser Stack instance. When the Access Key of the Instance is updated, the updated Access Key is shown.
• Created By: This attribute displays the username who has created the Instance.
• Created On: This attribute displays the date & time on which the instance is created.
• Modified By: This attribute displays the username who recently modified the instance.
• Modified On: This attribute displays the date & time on which the instance is recently modified.

Edit Page

To edit the Instance, click on the edit icon under the action column. Edit Instance popup appears as shown below.

Edit the required information on fields and click on the Update button and there appears Edit successful banner message.

Delete Page

To delete the instance, click on the Delete icon under Actions Column. A warning Delete popup appears as shown below.

Validation messages in Browser Stack.

1. In Create Instance popup, if the mandatory field is empty, the error message will get displayed as shown below.

2. If we create the duplicate instance name, an error message is displayed as shown below.

3. If Either the User name or Access key or both fields are invalid, a Warning message is populated stating “Warning: Either Username or Access Key is Invalid”.

Selecting Browser Stack for Execution.

1. We can set Browser Stack as our Executable Environment in three different positions and in the Executable environment dropdown we can set Browser Stack as Default, and it should be displayed in the format as “Browserstack-InstanceName”.

• In All project-level System configurations, Click on ConfigRun ConfigurationEnvironment Configuration as shown below.

As shown in the below screen, select Browser Stack from the Environment Configuration dropdown and click on the save button.

• In Individual project-level System configurations.
  As shown below the screen, navigate to the project then click on ConfigàRun ConfigurationàEnvironment Configuration.

As shown in the below screen, select Browser Stack from the Environment Configuration dropdown and click on the save button.

• In Quick run settings.
  As shown in the below picture, navigate to a project and click on the test development icon, and then click on Quick run settings.

As shown below the screen, select Browser Stack from the Environment Configuration dropdown and click on the save button.

Note:

• In All project-level system configurations, if we set the executable environment as Browser Stack, the same configuration should be reflected in the Individual project’s system configuration and Quick run settings.
• In the Individual project level’s system configuration if we set the executable environment as Browser Stack the same configuration should be reflected in the Quick run setting and vice-versa.

Executing the scripts using Browser Stack

Note: – Always in All project-level System configurations Windows, Mac, Android, and IOS platforms are displayed.

• If we select a web project, Windows, and Mac platforms are displayed in the Executable Environment.
• If we select a mobile project, Android and iOS platforms are displayed in the Executable Environment.
• If we select web and mobile projects, Windows, Mac, Android, and iOS platforms are displayed in the Executable Environment.
• If we select the Sales Force project, Windows, Mac, Android, and iOS platforms are displayed in the Executable Environment.
• We can execute the script in the browser stack neither on Windows /Mac/Android/iOS.

Windows: –

If we select Windows as OS respective Os Ver, Browser, and Browser Ver dropdowns are displayed. Refer to the below-shown screen.

Mac: –

If we select Mac as OS respective OS, Versions, Browser, and Browser Ver dropdowns are displayed. Refer to the below-shown screen.

How to check execution in Browser Stack?

• Navigate to the Browser Stack website and Sign in/Log into the website.
• Click on Automate to view Web-based executed scripts. Refer to the below screen.