At times, certain project specifications demand comprehensive testing of a web application across a diverse range of web browsers and their varying versions. Maintaining consistent functionality, visual appearance, and user engagement is essential.
To execute this type of cross-browser testing efficiently, there are two primary approaches:
One involves manual testing, where the website is examined across multiple browsers and devices.
The other approach entails leveraging specialized tools and services that replicate distinct browser environments.
Particularly, BrowserStack stands out as a tool that has garnered considerable attention in this field, thanks to its intuitive user interface.
Executing test cases on BrowserStack is crucial for QA teams to ensure the compatibility, functionality, and performance of websites and applications across a wide range of real browsers and devices.
It helps identify bugs, responsive design issues, and user experience problems, while also supporting automated testing and real environment testing.
BrowserStack eliminates the need for local testing infrastructure, reducing costs and enhancing overall testing efficiency.
So first let’s talk about the Basic Framework where we can automate test cases using the BDD approach to execute tests on a browser on the local machine.
So for this instead of explaining it from scratch here again, You can explore my blog where I have explained How to create a BDD automation framework using Cucumber in JavaScript and Playwright.
This blog gives you step-by-step guidance on how to Create Feature files, Steps files, Page Files, and various other utilities to make the framework more reusable and robust. So here is the link to this blog: https://shorturl.at/bjuvU
You must have a BrowserStack account to execute your tests, to create a new BrowserStack account you can visit the below link. https://www.browserstack.com/users/sign_up
To get started with BrowserStack implementation first store your BrowserStack username and access key in the .env file. To get the username and access key to navigate to your BrowserStack account. Click on Access key dropdown from dashboard and you will be able to see your username and access key.
Here you will be able to see your account details. Copy your Username and Access Key and store it in a .env file as shown below. To execute tests on BrowserStack set the Browserstack variable to ‘true’.
Now to set BrowserStack configurations Create a file as “Browserstack.js”, as you can see I have created a “Browserstack.js file” in the Utility folder.
Here are the essential BrowserStack configurations to integrate into this file.
The playwrightClientVersion variable is declared and assigned the output of the shell command executed using execSync from the child_process module.
.execSync('npx playwright --version’):
The command executed is npx playwright –version, which retrieves the version of the Playwright framework installed on the system. The output is converted to a string, trimmed to remove leading or trailing whitespace, and then split into an array based on spaces. The second element of the array (split(‘ ‘)[1]) represents the Playwright’s version.
caps():
This function is responsible for generating a configuration object used for browser testing with the BrowserStack platform and Playwright framework. It returns an object that contains configuration options for browser testing like browser, os, os_version, etc.
These are the variables from the .env file. If you are not using a .env file you can directly pass the BrowserStack username and access key.
As we have all the configurations ready, we will set up a test environment to execute tests on BrowserStack. Use the file where you have your Before and After methods. In the playwright-Js Framework we have these methods stored in the ‘TestHooks.js file’ so will update that file as below.
The above code Generates capabilities for BrowserStack using the caps() function from the ‘BrowserStack’ module. Construct the WebSocket endpoint URL for BrowserStack with the generated capabilities.
Now we have completed the BrowserStack implementation in our framework, now you can execute your tests on BrowserStack.
To execute tests on BrowserStack make sure you have “Browserstack = true” in the .env file.
Then you can execute your tests using the command ’npm run test’ on your terminal.
After running the test cases on BrowserStack, you’ll find the report below. Access comprehensive execution videos, and test logs for both successful and unsuccessful cases, along with execution duration.
Conclusion:
Integrating BrowserStack with Playwright JavaScript tests, gives access to a wide range of real browsers and devices, enabling comprehensive cross-browser and cross-platform testing. The scalability and cost-effectiveness of BrowserStack eliminate the need for maintaining an extensive device lab. Ultimately, this integration enhances test coverage, improves software quality, and ensures a seamless user experience across various browsers and platforms.
Priyanka is an SDET with 2.5+ years of hands-on experience in Manual, Automation, and API testing. The technologies she has worked on include Selenium, Playwright, Cucumber, Appium, Postman, SQL, GitHub, and Java. Also, she is interested in Blog writing and learning new technologies.
Agile methodologies are nothing but an approach or practice that applies in Software development and Project management which makes the development process more efficient and helps to maintain the quality of software. It mainly focuses on collaboration, flexibility, and adaptability in the testing process. During development, the software testing practices adhere to the agile methodology.
There are several project management tools such as Kanban, Jira, Scrum, or Extreme Programming (XP).
The core process involved in Agile development:
Define Requirements:
The product owner or analyst along with the development team collaborates with each other and identifies, analyzes, and defines the requirements. User stories are created for specific sprints to define the requirements. And these user stories are collected in the product backlog or product board.
Sprint Planning:
Sprint planning is a process in which a product goal gets defined and a plan for the upcoming sprint is defined. Developers from the development team pick a set of requirements from the product board to work on the upcoming sprint. A Sprint meeting happens and the team identifies the scope of the upcoming sprint and breaks down the requirements into tasks.
Sprint Execution:
In Sprint Execution, the development team starts working on user stories in a time-bound iteration called a Sprint. Daily scrum call meetings are conducted to discuss progress, work, and any impediments during the sprint.
Continuously Integration:
Continuously Integration is a process, where developers make changes in code and those changes are also merged in a remote repository (GitHub) and tested frequently. It automates stages of the project pipeline such as – build, test, and deployment. It helps to team working within agile development.
Agile Testing:
Testing activity occurs in the early phase of the development process. In this phase, the tester collaborates with the developer and PO to understand the requirement and also starts testing the module, and defines the acceptance criteria. Testers start preparing test scenarios and test cases based on user stories. And they execute test cases and report bugs using bug-reporting tools such as Jira.
Incremental Delivery:
In the incremental Delivery phase, a small, developed part of the software is delivered to the customer at the end of each sprint. It helps to improve the quality of software by delivering it in small parts.
Sprint Review:
The Dev team, Pos, and QAs are involved in the Sprint Review meeting. In this phase, Sprint review takes place. Here development team presents work accomplished or gives a demo of whatever they have developed in that sprint. The incomplete issues, backlog adjustments, and Action items are discussed in this meeting.
Sprint Retrospective:
The agenda of this meeting is to examine how Sprint went as far as people, requirements, relationships, processes, and tools.
Discussions Include:
What did we do well?
What should we have done better?
Identifies area for improvement
Suggestions
Actions
Let’s talk about Automated Testing:
Automated testing is an Agile practice that allows you to automate test cases through automation tools and execute the test cases to verify the functionality of software applications to meet customer expectations. It is a key aspect of agile development. Automated testing emphasizes manual testing efforts and also provides a way for continuous testing, early bug detection, and quick feedback.
Important aspects of Automated Testing:
Test Automation Framework: The team creates an automation framework using specific technology as per requirement and maintains it. It is a structured set of a rule and resources and tools which helps to create, execute, and automated the test cases. It allows us to reuse the code, in test data and also provides a way to generate test results or reports for execution.
Continuous Integration: The automation tool makes continuous integration easier when developers make changes in code and those changes are merged in a remote repository (GitHub) and tested frequently. Automated testing is an integral part of this process.
Regression Testing: Automated testing plays a vital role in regression testing. It makes sure that there should not be any unintended side effects occurring in the module when new changes have been made. Automation regression tests can be executed fast and repeatedly, giving quick feedback.
Continuous Delivery and Deployment: Automated testing allows us to run test suites to ensure that the changes made meet functional expectations and maintain the effectiveness and quality of the product. After completion of the automated testing phase, there is a Continuous Delivery process in which changes are automatically continuously deployed to the staging environment for testing. With this process code, the changes are continuously updated with the latest changes which makes faster delivery of the product in an efficient way.
Benefits of Automated Testing in Agile Methodologies:
Faster Feedback: Automated testing provides feedback quickly. It also helps in executing tests, generating results, and finding issues very quickly in the development cycle.
Increased Coverage: Automated testing allows you to create a wider range of test scenarios and test cases compared to manual tests.
Consistency-It helps to keep consistency in the execution of test cases, reducing human errors. Automated code itself needs to be tested to makes sure consistency and high quality.
Time and Cost Efficiency: Automated testing reduces human efforts and it is used in repetitive tasks, so it saves time and resources in the long run.
The working of CI/CD for automation testing in Agile:
CI/CD stands for Continuous Integration and Continuous Delivery as it is a pipeline that helps development teams to automate and makes it more efficient for building code, running tests, and also safely deploying code. The goal of the CI/CD method is to deploy code frequently and deliver working software to customers frequently and quickly.
Usually, Our source code is located on our local workstations. From there, we will commit our source code to the version control system, specifically using Git, which serves as our code management system, and is hosted on GitHub. Once the code is available in the code management system, the CI tool pulls that code automatically and builds under run unit test and then we call it Continuous integration.
During the CI process, we build and compile our source code and generate artifacts. Once these artifacts are generated, we need to deploy them on target env.
Target env may be changed based on the project necessities it may be a staging test, Dev or QA, preview, or production like various env we might have.
Now let’s take the artifacts we want to deploy on a staging environment.
Once it is deployed in the staging env we do the regression test and performance test. Once it successfully passes this test, it can be deployed to the production environment. During the deployment process, after the build, we move it into the staging environment, and if this transition to production can be achieved seamlessly without any manual intervention, we refer to it as Continuous Deployment.
In Continuous deployment, we can automatically deploy into the staging env and production environment.
Benefits of CI/CD:
Helps you to build better-quality software.
Automate the software release process for making delivery more efficient, rapid, and secure as well.
It helps you to automate repetitive tasks.
It reduces risks and makes the deployment process more predictable.
You can release software more frequently, which helps you to get fast feedback from your clients.
It gives a single view across all environments and applications.
What is Test Automation?
Test automation or automation testing is a process of automating test cases using automation tools and frameworks, managing test data, and asserting the automated result with requirements without any manual intervention. Automation testing plays an important role in achieving goals such as faster delivery, continuous integration, and frequent releases.
Benefits of Test Automation in Agile:
Faster Feedback: Automated tests can be executed quickly and also provide faster feedback on tests.
Improved Test Coverage: Automation tests allow running a large number of test cases across different environments hence it can cover different scenarios in the application.
Regression Testing Efficiency: Automation testing is mainly useful for running regression tests so it helps in repetitive testing after each code change.
Consistency and Accuracy: As automation testing is done without human intervention, it eliminates the possibility of human errors during test execution.
Benefits of Deployment Automation:
Deployment automation offers numerous benefits for software development, IT operations teams, and the entire organization. Automated deployment is a best practice in agile. Moreover, it allows developers to automate the deployment activities, development process, and testing activities. The following are the key benefits of deployment automation:
Faster and More Efficient Deployment: Automated deployment process is faster than manual deployment as it provides quick feedback. So that it reduces the time takes to release the software updates.
Consistency: Deployment automation ensures the consistency of the deployment across different environments (staging, dev, preview, production). So that it reduces the risk of configuration errors.
Reduce Human Errors: As Manual deployment involves humans which can lead to deployment errors, data loss, or other issues. So here, automation reduces such errors and increases the reliability of the deployment process.
Efficient Testing Environment: Automated deployment allows quick provisioning and teardown of the testing environment. This enables development and testing teams to work in isolation and concurrently, leading to faster testing cycles.
Cost Savings and Resource Optimization: Automated deployment reduces manual intervention which can lead to saving costs and resources.
Conclusion:
In conclusion, automated testing is an essential part of the dynamic landscape of the agile world. As we’ve explored this blog, it provides faster feedback, consistency, and accuracy, reducing risk and ensuring to delivery of high-quality software. Automation plays an important role in the form of CI/CD that helps you to build better-quality software.
Poonam is a dedicated Automation and Manual Testing professional with 2 years of experience, She is well-versed in the latest testing methodologies and tools. She has a solid foundation in programming languages such as Java, Ruby and JavaScript, and extensive experience working with automation tools such as Selenium, TestNG and Playwright, Capybara. She hold an MCS degree from Pune University, where She gained a solid foundation in computer science and programming.
Hello! In this blog, We will be exploring how to automate tests using selenium with Cucumber in Ruby.
What is Selenium?
How does the selenium web driver in Ruby work?
How to use selenium with ruby?
Ruby is a scripting language designed by Yukihiro Matsumoto, also known as Matz. It runs on a variety of platforms, such as Windows, Mac OS, and various versions of UNIX. Ruby is a pure object-oriented programming language.
Advantages of Ruby:
Open source and community support.
Flexibility.
Suitable for beginners.
Supports Web development and Desktop Applications.
Ruby is a general-purpose, interpreted programming language.
Ruby also provides a great number of helpful tools and libraries.
Ruby has a clean and easy syntax that allows a new developer to learn very quickly and easily.
What is Selenium:
Selenium is an open-source tool that automates web browsers. Selenium and Ruby can be used together, by using a gem called selenium-web driver. With this gem, you can easily automate your test cases. Selenium is a powerful tool as it supports major web browsers and supports almost all OS platforms- Windows, Linux, and Mac. You can explore selenium more on
Selenium WebDriver is a Gem that wraps the WebDriver server and makes it easier to drive a browser. WebDriver is a program that can control a web browser.
Installing selenium-web driver via gem: simply run this command on the terminal.
“gem install selenium-webdriver”
What is Ruby Gem:
Ruby gems are simply open-source libraries that contain Ruby code and are packaged with a little extra data. Using a gem allows a programmer to use the code within the gem in their program, without explicitly inserting that code.
Gems can be used for all sorts of purposes, and you can explore different gems at https://rubygems.org/. To get a better idea of what gems can do, here are a couple of popular gems and their functionality:
Bundler— Provides a consistent environment for Ruby projects by tracking and installing the needed gems and versions. It is the #1 downloaded gem of all time, but more on Bundler later.
RSpec — A testing framework that supports Behavior Driven Development for Ruby.
Devise— Devise works with authentication. For any website that needs to user login, Devise handles sign-in, sign-up, reset password, etc.
JSON — Provides an API for parsing JSON from text.
Installing Gems:
Installing gems locally is as simple as a single command: gem install [gem_name]. The install command fetches the code, downloads it to your computer, and installs the gem and any necessary dependencies. Finally, it will build documentation for the installed gems.
How to use selenium with Ruby:
In Ruby, you can create an instance of the WebDriver class by either instantiating an object or by starting a session. The instantiated object returns a session object of the WebDriver.
To instantiate a driver with the session object, we would need to do the following:
After installing ruby we need to install a few gems to start:
• gem install selenium-webdriver
• gem install selenium-cucumber
Download IDE for writing the code
• IDE : Intellij Idea Ultimate-2022.1.2
Steps to create files:
Create Project: File-New-Project
Create feature File: Right Click on project folder(Calculator)-New-Directory-features(name of folder)-Calculator.feature(File)
Create Step Definition File: Right Click on features(folder)-New-Directory-step_definitions(name of folder)-CalculatorSteps.rb(File)
Create Page File- Right Click on features(folder)-New-Directory-CalculatorPage(Folder)-Calculator.rb(File)
What is Feature File:
Feature Files are used to write acceptance steps during automated testing. A Feature File is a common file containing the feature description, scenarios, and steps for testing a feature. It serves as an entry point to the Cucumber tests. It is the file where your test scenarios are written in the Gherkin language. These files have a “.feature” extension, and users should create a separate Feature File for each software functionality.
A simple feature file consists of the following keywords/parts:
Feature − Name of the feature under test.
Description (optional) − Describe the feature under test.
Scenario − What is the test scenario?
Given − Prerequisite before the test steps get executed.
When − Specific condition which should match in order to execute the next step.
Then − What should happen if the condition mentioned in WHEN is satisfied?
We will create a project first, so click on File and choose “new project” from the menu that appears.
After creating the project we will create a feature file, so right-click on the project name and create a folder- feature and then create the file name as “Calculator. feature”.
Here is the code snippet for the feature file:]
Feature: Calculator
Scenario: Addition of two numbers
Given I launch calculator application
When I click on number 4
And I click on operator +
And I click on second number 5
Then I verify the result is 9
Now here all the steps are undefined, so we need to add a step definition file, so right click on the features folder and create a folder named “step_definitions” and in this folder create a file name “CalculatorSteps.rb”
What is Step Definition File:
The steps definition file stores the mapping between each step of the scenario defined in the feature file with a code of the function to be executed. So, now when Cucumber executes a step of the scenario mentioned in the feature file, it scans the step definition file and figures out which function is to be called. So for each step mentioned in the feature file (GIVEN, WHEN, THEN) which you want to execute you can write code within the step definition file.
Given(/^I launch calculator application$/) do
@Homepage = Homepage.new(@driver)
@Homepage.visit
end
When(/^I click on number (.*)$/) do |num1|
@Homepage.getnum1(num1);
end
And(/^I click on operator (.*)$/) do |oprt|
@Homepage.getoperator(oprt);
end
And(/^I click on second number (.*)$/) do |num2|
@Homepage.getnum2(num2);
sleep 2
end
Then(/^I verify the result is (.*)$/) do |result|
expected_result=@Homepage.verify_result()
expect(expected_result).to eq(result)
puts(result)
puts(expected_result)
puts "result match successfully"
end
However, this is not the complete job done.
Now if you hover over a method it shows cannot find method_name, so we need to create a method for every action, so right click on the features folder and create a folder name as “CalculatorPage” and in that folder create “Calculator. rb”
Here is the code snippet for the page file where we can have all methods:
require 'selenium-webdriver'
class Homepage
def initialize(browser)
@driver= Selenium::WebDriver.for :chrome
@driver.manage.window.maximize
end
def visit
@driver.get "https://www.calculator.net/"
puts "launch application successfully"
end
def getnum1(num1)
@driver.find_element(:xpath,"//span[@onclick='r(#{num1})']").click
end
def getoperator(oprt)
@driver.find_element(:xpath,"(//span[contains(text(),'#{oprt}')])[1]").click
end
def getnum2(num2)
@driver.find_element(:xpath,"//span[@onclick='r(#{num2})']").click
end
def verify_result()
@driver.find_element(:id,'sciOutPut').text.lstrip()
end
end
What is Page File:
In the above code snippet, methods contain actions like opening the browser, visiting a website, CSS selectors, Xpaths, and actions to be performed on it (click), and verifying. Simply page file is where you write all the code in detail, all the actions you want to execute in the step definition file. By creating methods you can avoid messy code and can show only necessary things in the step definition file.
To run the feature file we need to configure the project so,
Here is the snippet for configurations:
Go to Run on the top bar and click on plus icon select cucumber and then add the following details for configurations:
After completing the configuration now run the feature file with the command on the IntelliJ terminal:
Before running this command make sure you are at the correct feature file path so here you need to move to the Calculator folder.
• cucumber features/Calculator.feature
here is the snippet of output:
Here is the cucumber report: you can get this report by running the command on the IntelliJ terminal-
cucumber features –format HTML –out reports
Conclusion:
Like Java and Python, Ruby is a general-purpose programming language. however, it focuses on simplicity, precision, and productivity. Ruby being an array-based language, is very powerful for specific uses and works particularly well with ordered datasets.
Pranali has over 1.10+ years of experience in QA, with a strong foundation in both manual and automation testing. I’m a versatile engineer skilled in Selenium, TestNG, Cucumber, Java, Ruby, POSTMAN, SitePrism, Capybara, Jira, SQL, and GitHub.
Starting from September 30th, 2023, Selenium will no longer provide support for Java 8. Instead, the minimum supported version of Java will be Java 11. For the official announcement from Selenium, please refer to this link:
Selenium has supported Java for a long period. Java 8 reached the end of active support about a year ago as you can see below the details of version support.
The default of Selenium has not had a major release in several years and also a bug has been found that cannot be fixed. So the decision was made to move to the native Java HTTP client which requires using Java 11 or greater version. So instead of upgrading to the latest Java for now Java 11 will be a cautious step to move forward. In this blog, we will explore how to achieve that with minimal changes.
Download and Install Java 11:
First, you need to download the exe file for the JDK 11 version. For that, you can visit the link provided below: https://www.oracle.com/in/java/technologies/javase/jdk11-archive-downloads.html You can get it by signing in to the Oracle which is free. You will have various file types to download. For the exe file, you can refer below image.
After completing the download you proceed with the installation process.
For the installation, you can follow the below steps shown in screenshots. Then the installation process will be completed.
After completing the installation of Java 11.
You will find the file below in your system at the following path: C:\Program Files\Java.
So now you have successfully installed Java 11.
Setting Up Environment variable:
The next step is to set up the environment variable. To do that, simply navigate to the Environment Variable.
Settings > About > Advance System Settings > Environment Variables
As you can see in the image above, I have successfully updated the JAVA_HOME path with the latest JDK version. Additionally, don’t forget to update the path variable with the latest “bin” folder.
So now start your command prompt by executing the java -version command. You will get to see the latest updated version of Java.
We have now installed Java 11 and configured the Environment Variables.
Update Existing project on the latest installed Java version which is Java 11:
So for now we’ll see how we can update the existing Java 8 project to Java 11
So you must have a pom.xml file present in your existing project framework.
Before:
After:
As you can see the source and target in the above snapshots are version 8. Here you can update the version of the java with latest 11 as we have downloaded and installed Java 11. So after updating the 8 with 11, you have to rebuild the pom.xml project as well. After that, you will see the successfully updated Java version to 11. This is how you need to update your Java version to 11.
Swapnil is an SDET with 1+ years of hands-on experience in Manual, Automation, and API testing. The technologies I have worked on include Selenium, Playwright, Cucumber, Appium, Postman, SQL, GitHub, Java, and Python. Also, I love Blog writing and learning new technologies.
Faster App Deployment: Manual testing can be time-consuming and resource-intensive when it comes to identifying bugs in code. Mobile automation testing reduces the time and effort required by using automation tools. These tools enable quick checks to ensure the code performs as desired, leading to a faster feedback loop and accelerated app deployment.
Improved Efficiency: With automated testing, there is no need for human intervention. Tests can be scheduled to run overnight, and results can be collected the next morning. By automating the testing process, app developers and QA teams can spend less time on testing and focus more on other critical tasks. This boosts overall productivity and efficiency.
Precision in Testing: Mobile automation testing is more reliable than manual testing, which is prone to human errors. Automated tests produce precise and consistent results, reducing the likelihood of bugs. Test cases generated by automated systems enhance reliability and minimize the probability of errors when launching the app.
Real-time Feedback: Automated testing provides instant feedback. Tests run quickly, and test reports are generated immediately. This enables developers to promptly address any malfunctions or issues detected during the testing process. Real-time feedback helps in identifying and resolving problems swiftly, ensuring app quality.
Cost Savings: Contrary to common misconception, automated testing is more cost-effective than manual testing. Manual testing can be repetitive and monotonous, leading to increased chances of human error. Automation increases testing speed and accuracy, reducing the need for extensive manual intervention. Once the automated testing scripts are developed, they can be reused 24/7 without incurring additional costs.
What is WebDriver.io?
WebdriverIO is an open-source testing automation framework written in JavaScript and running on NodeJS. Next-gen browser and mobile automation test framework for Node.js
Why Webdriver.IO?
WebdriverIO is a progressive automation framework built to automate modern web and mobile applications. It simplifies the interaction with your app and provides a set of plugins that help you create a scalable, robust, and stable test suite.
Features of WebDriver.io:
Easy to Set up: WebdriverIO follows a simple setup process. Just install node packages using npm and start testing
Customization: WebdriverIO is highly extendable so users can customize the framework as they need
Cross-Browser Testing: WebdriverIO supports multiple browsers such as Chrome, Edge, Firefox, Internet Explorer, and Safari.
Native Mobile Application Testing: WebdriverIO framework can be extended to test native mobile applications.
Multiple Tab/Window Support: WebdriverIO Supports switching to and from various windows and tabs.
iFrame Support: WebdriverIO doesn’t restrict in terms of iFrame. Testers can automate iframe-based scenarios using simple web driver commands.
Reporters: WebdriverIO supports more than dozens of reporters.
Testing Framework/Assertions: WebdriverIO supports Mocha, Jasmine, and Cucumber test frameworks.
Parallel Testing: Testers can configure WebdriverIO to launch multiple instances and execute tests parallelly.
Screenshots: WebdriverIO can be configured to take screenshots for tests.
Video: Though WebdriverIO doesn’t support video recording out of the box it can be configured to do so.
Pipeline Integration: WebdriverIO tests can be integrated into CI Systems like Jenkins, Azure, etc.
Selectors: It supports various types of selectors including CSS and Xpath.
Page Object Pattern: WebdriverIO Framework can be easily configured to Page Object Model.
File Upload and Download: WebdriverIO supports File Upload and Download features.
Mobile Automation with WebDriver.io: This enables code usage between iOS, Android, and Windows test suites. It runs on iOS and Android applications using the WebDriver protocol.
Requirement For Mobile Automation using webdriver.io:
Pre-Setup
Installation & Configuration
Install the latest stable version of Android Studio from https://developer.android.com/studio
Then Install android-platform-tools from CLI
Install JDK’s latest stable version from here https://www.oracle.com/java/technologies/javase-jdk16-downloads.html
Download the latest stable version of VS Code from https://code.visualstudio.com/download
Install the latest version of Allure for Report Generation from https://docs.qameta.io/allure/
Download and install the latest LTS Node.js – https://nodejs.org/en/download
Install Following Dependencies
Commands to install the dependencies
npm i @wdio/allure-reporter
npm i @wdio/appium-service
npm i @wdio/browserstack-service
npm i @wdio/cli
npm i @wdio/cucumber-framework
npm i @wdio/local-runner
npm i @wdio/mocha-framework
npm i chromedriver
npm i wdio-chromedriver-service
npm i ts-node
npm i webdriverio
npm i allure-commandline
npm i appium
In WebDriver.io, the config file (wdio.conf.js) is a crucial component used for configuring and customizing the test execution environment. It allows you to define various settings, options, and capabilities for your WebDriver.io tests. The config file acts as a central configuration hub for your test suites and provides flexibility in managing different test environments and setups.
Here are some common uses of the config file in WebDriver.io:
Specifying Test Framework and Reporter:
You can define the test framework (e.g., Mocha, Jasmine) and the reporter (e.g., Spec, Dot, Allure) for your test runs. This ensures that the tests are executed using the desired framework and provides appropriate reporting formats.
Defining Test Files and Suites:
You can specify the test files or directories containing the test files to be executed during a test run. Additionally, you can define test suites, which allow you to group related tests together for organized execution.
Configuring Test Environments:
The config file allows you to configure different test environments (e.g., local, remote, cloud-based) and set the desired capabilities for each environment. This includes specifying the browser or device to be used, browser version, operating system, and other relevant configurations.
Managing Selenium Grid and WebDriver Services:
If you’re using a Selenium Grid or WebDriver service, the config file lets you configure the connection details and capabilities for these services. You can specify the host, port, and other relevant configurations for connecting to the grid or service.
Defining Hooks and Lifecycle Events:
WebDriver.io provides hooks and lifecycle events that allow you to execute code at specific points during the test execution cycle. The config file lets you define these hooks, such as before and after hooks, to perform setup and teardown actions or customize test behavior.
Setting Timeout and Retry Options:
You can configure timeout values for various actions, such as test execution, page loading, and element interactions. Additionally, you can define retry options, which specify the number of times a test should be retried in case of failures.
Integrating with Test Services and Frameworks:
WebDriver.io supports integration with various test services and frameworks, such as Appium, Sauce Labs, and Cucumber. The config file allows you to set up and configure these integrations, enabling seamless usage and interaction with these services.
By utilizing the config file effectively, you can streamline and tailor your WebDriver.io test runs according to your specific requirements. It provides a flexible and centralized approach to managing test configurations, environments, and other essential aspects of your test automation setup.
Prerequisites for the Android Studio:
To use Android Studio, you will need to ensure that your system meets the following prerequisites:
Operating System:
Android Studio is compatible with Windows, macOS, and Linux operating systems. Make sure you have a supported version of the operating system installed on your computer.
Java Development Kit (JDK):
Android Studio requires a compatible version of the JDK to be installed. It is recommended to use the latest stable version of JDK. Currently, Android Studio supports JDK 8 or higher. You can download the JDK from the Oracle website or use OpenJDK.
System Requirements:
Android Studio has certain hardware requirements to function optimally. The exact specifications may vary depending on the version and updates of Android Studio, but generally, you should have:
Android SDK:
Android Studio requires the Android SDK (Software Development Kit) to develop and test Android applications. The SDK provides libraries, APIs, and tools necessary for app development. Android Studio includes a bundled version of the Android SDK, which you can install during the Android Studio installation process. Alternatively, you can download the SDK separately and configure Android Studio to use it.
Emulator Requirements:
If you plan to test your apps on emulated devices, your system should meet the requirements for running the Android Emulator. This includes having an Intel or AMD processor with virtualization extensions enabled in the BIOS settings.
Internet Connection:
An internet connection is required during the installation and setup process of Android Studio. It is necessary to download additional components, SDK packages, and updates. It’s important to note that the specific requirements and recommendations may change with different versions of Android Studio. It’s always a good practice to refer to the official documentation and system requirements provided by Google for the most up-to-date information before installing Android Studio.
What is use tsconfig.json:
The tsconfig.json file is used in TypeScript projects to configure the TypeScript compiler (tsc) and specify the compilation settings for your TypeScript code. It provides a way to customize the behavior of the TypeScript compiler and control how your TypeScript files are transpiled into JavaScript.
key uses and features of the tsconfig.json file:
Compiler Options:
The tsconfig.json file allows you to define various compiler options to specify how the TypeScript compiler should handle your code. These options include target ECMAScript version, module system (e.g., CommonJS, ES modules), output directory, source map generation, strictness level, and more. You can tailor these options to match the requirements of your project and the desired JavaScript output.
File Inclusion and Exclusion:
Using the include and exclude properties in tsconfig.json, you can specify the files or directories to include or exclude from the TypeScript compilation process. This helps you define the scope of compilation and avoid unnecessary collection of files that are not part of your project.
Module Resolution:
TypeScript supports different module resolution strategies (e.g., Node.js, Classic) for resolving module imports in your code. The tsconfig.json file allows you to specify the desired module resolution strategy using the module resolution compiler option.
Type Checking and Error Reporting:
TypeScript provides powerful type-checking capabilities. The tsconfig.json file enables you to configure the level of type-checking strictness using options like strict, noImplicitAny, strictNullChecks, and more. By adjusting these options, you can control the rigor of type checking and the level of error reporting during compilation.
Project References:
With the tsconfig.json file, you can set up project references, which enables you to organize your TypeScript code into multiple smaller projects and manage their dependencies. Project references allow you to compile and reference TypeScript code across projects and enforce dependencies between them.
Extended Configuration Inheritance:
The tsconfig.json file supports extending and inheriting configurations from base configuration files using the extends property. This allows you to define a common set of compiler options in a base configuration file and override or extend them in specific project configurations.
IDE and Tooling Integration:
IDEs and development tools, such as Visual Studio Code and other TypeScript-aware editors, use the tsconfig.json file to provide features like IntelliSense, code navigation, error highlighting, and build integration. The configuration file helps tools understand the project structure, dependencies, and compilation settings, enhancing the development experience.
The tsconfig.json file serves as a central configuration file for TypeScript projects, enabling you to customize and fine-tune the TypeScript compilation process according to the needs of your project. It helps maintain consistency, improves code quality, and ensures smooth integration with development tools and workflows.
In Behavior-Driven Development (BDD), feature files, step files, and page files are essential components used to describe and implement the behavior of a software system. BDD focuses on collaboration and communication between developers, testers, and stakeholders by using a common language that is easily understandable by all parties involved.
Feature file Step Definition and Page object file:
Feature Files:
A feature file is a textual representation of a software feature or functionality. It typically describes the behavior of a specific feature from a user’s perspective. Feature files are written using a plain-text format, often in the Gherkin syntax. They are used to capture high-level scenarios, user stories, and acceptance criteria in a structured manner. Feature files serve as a communication tool between stakeholders, developers, and testers to ensure a shared understanding of the system’s behavior.
Step Files:
Step files, also known as step definitions or step implementations, are code files that provide the actual implementation of the steps described in the feature files. Each step in a feature file is associated with a corresponding step definition in the step files. Step files are written in a programming language (such as JavaScript, Java, Ruby, etc.) and contain the logic and actions to be performed for each step. They connect the feature files with the underlying codebase and define the behavior of the system in response to the steps described in the feature files.
Page Files:
In the context of BDD test automation, page files represent the Page Object Model (POM) or similar abstraction that represents the user interface (UI) elements and actions of a web application. Page files provide a structured way to define and manage the UI elements, such as buttons, forms, input fields, etc., along with associated methods for interacting with those elements. They encapsulate the UI interactions and provide reusable methods to perform actions on the web application’s pages. Page files enhance the maintainability and reusability of the test automation code.
In summary, feature files describe the behavior of a software feature in a structured, human-readable format. Step files provide the implementation of the steps described in the feature files, connecting them to the underlying codebase. Page files, specific to BDD test automation, represent a web application’s UI elements and actions, encapsulating the UI interactions and providing reusable methods. These files collectively enable collaboration, communication, and automated testing in a BDD approach.
Let’s See about Appium
Appium is an open-source tool for traditional automation, web, and hybrid apps on iOS, Android, and Windows desktop mobile platforms. Indigenous apps are those written using iOS and Android. Mobile web applications are accessed using a mobile browser (Appium supports Safari for iOS apps and Chrome or the built-in ‘Browser’ for Android apps). Hybrid apps have a wrapper around “web view”—a traditional controller that allows you to interact with web content. Projects like Apache Cordova make it easy to build applications using web technology and integrate them into a traditional wrapper, creating a hybrid application.
Importantly, Appium is “cross-platform”, allowing you to write tests against multiple platforms (iOS, Android), using the same API. This enables code usage between iOS, Android, and Windows test suites. It runs on iOS and Android applications using the WebDriver protocol.
Cucumber:
Cucumber is a tool for running automated tests written in plain language. Because they’re written in plain language, they can be read by anyone on your team. Because they can be read by anyone, you can use them to help improve communication, collaboration and trust in your team.
Android Emulator:
The Android Emulator simulates Android devices on your computer so that you can test your application on a variety of devices and Android API levels without needing to have each physical device. The emulator offers these advantages:
Flexibility: In addition to being able to simulate a variety of devices and Android API levels, the emulator comes with predefined configurations for various Android phones, tablets, Wear OS, and Android TV devices.
High fidelity: The emulator provides almost all the capabilities of a real Android device. You can simulate incoming phone calls and text messages, specify the location of the device, simulate different network speeds, simulate rotation and other hardware sensors, access the Google Play Store, and much more.
Speed: Testing your app on the emulator is in some ways faster and easier than doing so on a physical device. For example, you can transfer data faster to the emulator than to a device connected over USB.
In most cases, the emulator is the best option for your testing needs. This page covers the core emulator functionalities and how to get started with it.
Browser Stack:
BrowserStack is a cross-platform web browser testing tool that allows users to test their websites and mobile applications on different browsers and operating systems. It is available as a cloud-based service or as an on-premise solution. BrowserStack provides a range of features, including live testing, automated screenshots, and performance analysis. It is also compatible with a number of popular testing frameworks, such as Selenium, WebDriver, and Protractor. BrowserStack is a paid service, but it offers a free trial for new users.
Create a sample Appium Project:
initialize a project and create the package. json file
npm init -y
Install Dependencies
npm install
Install Webdriver.io
npm install -g webdriverio or npm install --save-dev webdriverio @wdio/cli
services: [
[
'appium',
{
// This will use the globally installed version of Appium
command: 'appium',
args: {
// This is needed to tell Appium that we can execute local ADB commands
// and to automatically download the latest version of ChromeDrive
relaxedSecurity: true,
address: '127.0.0.1/wd/hub',
// Write the Appium logs to a file in the root of the directory
log: './appium.log',
},
},
],
],
Install cucumber
$ npm install @cucumber/cucumber
Write your Feature File then, write your feature in features/calculator.feature
Feature: Mobile App Feature
Scenario: Verify user can perform addition operation on calculator
When User taps on fou
And User taps on +
And User taps on four
And User taps on equals
Then User Verify total is 8
Create a Step definition features/support/calc.ts
const { When, Then } = require('@cucumber/cucumber')
import { DemoPage } from '../page/DemoPage'
let Demo = new DemoPage()
When('User taps on four', async () => {
await Demo.firstNumber()
})
When('User taps on +', async () => {
await Demo.Add()
})
When('User taps on equals', async () => {
await Demo.Equals()
})
Then('User Verify total is 8', async () => {
await Demo.Verify()
})
Webdriver.io has great support for Mobile automation and using Webriver.io users can Quickly set up the Mobile automation framework.BDD helps Teams across Organizations to work collaboratively and helps non-tech teams to understand the flow of applications. Tools like Appium make mobile automation easy. combination of Webdriver.io cucumber appium and BrowserStack makes things more. Reliable and useful in modern Mobile automation testing.
By profession an Automation Test Engineer, Having 3+year experience in Manual and automation testing. Having hands-on experience in Cypress with JavaScript, NodeJS. Designed automation web framework in Cypress, Webdriver.io, Selenium with jest in JavaScript. He loves to explore and learn new tools and technologies.
The purpose of this blog is to provide a step-by-step guide on how to use Visual Studio Code for Java Selenium Automation as the Integrated Development Environment (IDE) for designing and running Selenium tests with Java. Visual Studio Code is a defacto IDE for JavaScript, however, it is rarely used for Java and Selenium automation as traditionally test automation engineers use either Eclipse or IntelliJ IDEA. Being one of the most widely used IDEs, software professionals prefer Visual Sstudio Code for its functionality.
Cross-platform support: Visual Studio Code can run on Windows, macOS, and Linux
IntelliSense: Visual Studio Code provides intelligent code completion and error detection, making it easier to write and debug code
Built-in Git integration: Visual Studio Code provides built-in support for Git, allowing you to easily version control your projects
Extensible with plugins: Visual Studio Code has a large community of developers who have created a variety of plugins to enhance the functionality of the IDE.
Fast and lightweight: The design of Visual Studio Code focuses on being fast and lightweight, making it easy to use on lower-end hardware.
Free and open-source: Visual Studio Code is free and open-source, making it accessible to everyone.
Debugging and testing: Visual Studio Code has built-in support for debugging and testing, making it easier to identify and fix bugs in your code.
Customization: You can customize Visual Studio Code with themes, keybindings, and settings, allowing you to tailor the IDE to your needs.
Here’s what you’ll need to get started with using Visual Studio Code for Java Selenium Automation:
Once you’ve installed these components, you can create a new Java project in Visual Studio Code and add the Maven libraries to it.
Following the installation of these parts, you can use Visual Studio Code to build a new Java project and add the Maven libraries to your project.
Steps to setup in Visual Studio Code for Java Selenium Automation:
Assuming Visual Studio Code is installed, let’s start the recipe step by step to create a flow for execution.
Step 1:
You need to open Visual Studio Code and locate the Marketplace.
Step 2:
Go to the search bar search for Java then Install the Extension pack for Java from the Marketplace.
Step 3:
Now, Navigate to the settings option in the lower left corner.
Step 4:
Select the command palette and look for the command create Java project.
Step 5:
Probably, here we start how to add a maven repository into the project to run the Java-Selenium test using Visual Studio Code. After selecting Create Java Project, select the “Maven” option to help you create the project.
Step 6:
After that, it will navigate to the browse folder and choose a specific folder to create your Java project. Please select a folder and open it in Visual Studio Code.
Step 7:
The screen below will appear; enter your project name and press “Enter” to open that project in Visual Sstudio Code.
Step 8:
Once you open the project, you will see the default folder structure displayed. To ensure code reusability, we create the following framework in Visual Studio Code.
Default Structure
Hybrid Framework folder structure
Hybrid Driven Framework is a combination of both the Data-Driven and Keyword-Driven frameworks. Here, we externalize the keywords, as well as the test data. Furthermore, Keywords are maintained in a separate Java class file and test data can be maintained either in a properties file/excel file/can use the data provider of a TestNG framework.
Step 9:
So, for adding Maven dependencies and how to download them
Maven is a tool for managing or building projects. When various test engineers incorporate their files into the same framework, they use it to check for compilation problems amongst framework components. Consequently, every time we make a change to the framework, we update the build status and continuously maintain the monitor, framework components, or build. As a result, there are no compilation errors in the framework, it will output a “build success” message; otherwise, it will output a “build failure” message.
Once you select Maven Project, it will create a Maven project with a pom.xml file. In the pom.xml file, you need to add the selenium dependency from the website https://mvnrepository.com/ and add it into dependency.
This dependency has been added to provide the libraries required to run the Selenium project. In a normal Selenium project, we need to download standalone libraries and then add them to external libraries, whereas here, once you add this Maven dependency, it will automatically download all libraries required for the Selenium project.
In a Maven project, you can use the Apache POI library by adding its dependency to your project’s pom.xml file. This will automatically download and include the library in your project’s classpath. Once you have added the dependency, you can start using the Apache POI APIs in your Java code to read, write, and manipulate Microsoft Office documents.
In a Maven project, you can add the Extent Reports dependency to your project’s pom.xml file to use its reporting functionality. Once you have added the dependency, you can start using the Extent Reports APIs in your Java code to create and generate detailed reports for your automation test results.
In a Maven project, you can add the TestNG dependency to your project’s pom.xml file to use its testing functionality. Once you have added the dependency, you can start using the TestNG annotations in your Java code to define your tests, test suites, and test configurations.
In a Maven project, you can add the Log4j dependency to your project’s pom.xml file to use its logging functionality. Once you have added the dependency, you can start using the Log4j APIs in your Java code to log messages to various output targets. You can configure Log4j using a configuration file such as log4j2.xml or log4j2.properties, which specifies the logging level, output target, and other logging settings.
Here, you need to run Java-selenium tests by using the pom.xml file, according to your demand and test requirements, Therefore, you can add more maven repositories.
1. Test/Java/example:
This folder contains the test source code packages and classes. Here, this contains all the data related to test cases, including page objects, base classes, and the test case class, which helps run the whole TestNG framework. However, this contains all the data related to test cases, including page objects, base classes, and the test cases class, which help run the whole TestNG framework.
Code Explanation in Demo example:
Login Page:
The base class in the main class will take care of browser setup, loading configuration files, and other reusable methods like screenshots, handling sync issues, and many more.
Using Base, we can avoid code duplication.
Reuse code as much as we can.
package com.example.Pages;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.PageFactory;
public class LoginPage {
WebDriver driver;
public LoginPage(WebDriver driver){
this.driver = driver;
PageFactory.initElements(driver, this);
}
@FindBy(id="email")
WebElement usernameBox;
@FindBy(id="passwd")
WebElement passwordBox;
@FindBy(name="SubmitLogin")
WebElement SignInBtn;
public void enterUsername(String uname){
usernameBox.sendKeys(uname);
}
public void enterPassword(String upwd){
passwordBox.sendKeys(upwd);
}
public void submitButton(){
SignInBtn.click();
}
}
Base Class:
@BeforeClass: The annotated method will be run before the first test method in the current class is invoked.
@AfterClass: The annotated method will be run after all the test methods in the current class have been run.
package com.example.TestCases;
import org.apache.log4j.Logger;
import org.apache.log4j.PropertyConfigurator;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import com.example.Utilities.ReadConfig;
public class BaseClass {
ReadConfig read = new ReadConfig();
public String googlebaseurl = read.getGoogleBaseURL();
public String loginbaseurl = read.getLoginBaseURL();
public String uname = read.getUsername();
public String upwd = read.getPassword();
public String SuccessURL = read.getSuccessURL();
public WebDriver driver;
public Logger logger;
@BeforeClass
public void SetUp(){
System.setProperty("webdriver.chrome.driver", "Drivers/chromedriver.exe");
// WebDriverManager.chromedriver().setup();
driver = new ChromeDriver();
driver.manage().window().maximize();
logger = Logger.getLogger("googledemo");
PropertyConfigurator.configure("log4j.properties");
}
@AfterClass
public void tearDown(){
driver.quit();
}
}
Test Class:
According to the below code, This class will help to run TestNG test cases and will give results. You can add third-party tools for generating reports as well such as extent reports, and Allure reports.
Basically, this folder is used to store browsers that will be required to run test cases on that specific browser. Whether it is Chrome, Edge, or Opera. Further includes driver information, where the Chrome Driver, Firefox, or Edge—whichever you’re comfortable with. Even you can use maven dependency for instantiating Webdriver. The WebDriverManager is a library that allows you to automate the management of WebDriver binaries. There are such as Chrome driver, gecko driver, etc. in your Java project.
3. Configuration:
The Above image implies that properties are used to externalize configurable data. Because if you put that data in your code (test script), you would need to build the code each time you wanted to modify the property’s value. As a result, the fundamental advantage of properties is that they may be modified at any time. And exist independently of your source code. Thus, a pair of strings is used to store each parameter, with one string serving as the key and the other as the value.
You can see the folder structure, where the configuration folder contains a config file that includes all the common information required to run a test.
4. Utilities:
Once we have the config file loaded, we need to read the properties of the config file. The Properties object gives us the .getPropertymethod that takes the key of the property as a parameter and returns it. Basically, the value of the matched key from the .properties file. Therefore, this includes a class that assists in reading all of the data from the config.properties file.
5. Screenshots:
A screenshot in Selenium WebDriver is there we can use for bug analysis. Selenium WebDriver can automatically take screenshots during the execution. But if users need to capture a screenshot on their own, they need to use the Take Screenshot method. So, which notifies the WebDriver to take the screenshot and store it in Selenium. As a result, it includes screenshots that we took at the time of running the test.
6. log4j.properties:
The above image log4j.properties is a configuration file that we can use with the Apache Log4j logging framework. As a result, which is a popular logging library for Java applications. Users utilize this file to configure the logging behavior of the application, including specifying the output destination for log messages. The format of log messages, and the logging levels for different categories of log messages. The log4j.properties file contains key-value pairs that define the various logging settings for the application.
Step 10:
Basically, here is how we organize the hybrid framework. We need to add a few folders to make it easier for testers to run code without encountering them.
Initially, you will not find any errors until you save your code in Visual Studio Code through ctrl+s. You can hover over that error and you will find a solution for that. If you need to install any package, Thus it will also be visible to you.
Run Test:
Navigate to the Project Directory:- Open a command prompt or terminal window. And navigate to the directory where your Maven project is located. This should be the directory that contains the “pom.xml” file, which is the Maven project configuration file.
Run Maven Test Command:- Once you are in the project directory, you can run the following command to execute the Maven tests: “mvn test”
This command will instruct Maven to run the tests defined in your Maven project. Maven will automatically compile the necessary source code and download dependencies. And execute the tests using a testing framework such as JUnit, TestNG, or any other testing framework that you have configured in your project’s dependencies.
View Test Results:- After the tests have been executed. The Maven will display the test results in the command prompt or terminal window. You can view the test results to see which tests have passed, failed, or skipped.
Video:
Accordingly, the below tutorial will guide you
Conclusion:
Since Visual Studio Code for Java Selenium m Automation is a well-known IDE among software professionals. Here, I can think of no better method to run Java-Selenium automation through VSCode.
However, It offers the best Java extension for using Visual Studio Code for Java Selenium Automation. Basically, we make run test cases more appropriate and adaptable.
Harish is an SDET with expertise in API, web, and mobile testing. He has worked on multiple Web and mobile automation tools including Cypress with JavaScript, Appium, and Selenium with Python and Java. He is very keen to learn new Technologies and Tools for test automation. His latest stint was in TestProject.io. He loves to read books when he has spare time.
