DEV Community: iritesh92

9 Of The Best Java Testing Frameworks For 2021

iritesh92 — Fri, 14 May 2021 08:46:09 +0000

The fact is not alien to us anymore that cross browser testing is imperative to enhance your application’s user experience. Enhanced knowledge of popular and highly acclaimed testing frameworks goes a long way to develop a new app. It holds more significance if you are a full-stack developer or expert programmer. Most developers prefer Java because of its platform independence and ease of use to build anything – simple applications to sophisticated mobile apps, websites, and more.

In this article, we will share some of the most useful and best Java testing frameworks you can learn in 2021 to boost your career and improve your skill sets.

What are survey stats saying?

As per the TIOBE Popularity index for February 2021, Java is the second most popular programming language worldwide, with an overall rating of 11.29%.

In another survey conducted by Statista in 2020, Java was among the top five listings for broadly used programming languages worldwide, where almost 40.2% of respondents mentioned that they successfully used Java.

What are Java Testing Frameworks?

Java Frameworks can be referred to as the bodies of pre-defined code used by Java to create custom applications. The software testers or engineers can control the capabilities and use them to their advantage. Frameworks allow you to add your code to the enormous bodies of pre-written codes. The Java framework helps you focus on your business app’s core logic, avoiding the need to write code for basic functionalities like database connections, exception handling methods, and more.

Advantages Of Using Java Testing Frameworks

Efficiency: Usually, web app development jobs take a substantial amount of time to finish, which can be easily resolved using Java frameworks, as its pre-written tasks make the jobs simpler.
Security: Frameworks offers top-notch security to the applications and also helps mitigate security problems at a speedy pace.
Support: Frameworks offer broad community support wherein you can mitigate all your issues and doubts within a short span.
Expense: While we are talking about expenses, you would be relieved to know that the cost of maintenance for Java frameworks is relatively low. Development expenses are considerably reduced due to the usage of test automation frameworks.

Nine Best Java Testing Frameworks for 2021

There are myriads of Java testing frameworks presently accessible for QA testers. It is understandable that the more choices you have, the more intricate it is to decide the best one from the lot. Let us quickly go through 9 of the best Java testing frameworks:

1. JUnit

JUnit is one of the popular Java unit testing frameworks. The unit test is used in a path function or for testing a small piece of code. It plays a vital role in test-driven development and is a part of the collective unit test frameworks called xUnit. JUnit boosts the initiative of “to begin with testing than coding,” which highlights setting up the testing data for a part of code that should be tested prior to execution. This technique is akin to the “test a little, code a little” technique. It enhances the programmer’s productivity and program code’s stability, which in turn reduces the pressure on the programmer and minimizes the time spent on debugging.

JUnit 5.0 annotations added a lot of power and convenience to unit testing. Annotations ease the process of writing unit tests for examining exceptions. Expert developers who follow the test-driven approach should first write & run the unit testing before writing further code. Once the code is written, entire testing must be carried out and checked for appropriate results. Once a new test code is added, all test scenarios should be re-executed to ensure that everything is fine.

Core Features of JUnit

JUnit offers test runners to execute tests.
Enables you to write enhanced tests at an expedited pace.
Offers annotations to simplify writing and maintaining of tests.
Offers assertions to test anticipated outcomes.
Less complicated and takes minimum time to execute.
Test suites can contain test cases as well as other test suites.

Is JUnit an ideal Java testing framework for you?

While it is a primitive way for testing Java-based projects, it offers several advantages to teams:

Early bug-finder : This framework can easily locate bugs at an early stage in comparison to other test automation frameworks. When an error is found, it is specified in a separate section until it is mitigated. This helps drive focus on debugging.
Open Source : JUnit is a free and open-source testing framework. Hence, a passionate community is built around the framework.
Better for TDD (Test-Driven Development): To catch bugs at an early stage, QA engineers prefer Test-Driven Development (TDD). Developers execute tests, and problems are resolved before taking the build for software tests. The framework uses assertions in testing, and the code throws an assert when encountered with a failure. The JUnit test framework is extremely useful with Test-Driven development.

2. JBehave

JBehave is also one of the best Java Testing Frameworks, primarily used with Selenium WebDriver for Java testing. JBehave framework is a BDD (Behaviour-Driven Development) framework, which was created in 2003. The ultimate objective behind JBehave is facilitating newcomers to understand and learn about Behaviour-Driven Development at a faster pace.

Core Features of JBehave

Pure Java execution that plays well with Java-based enterprises or when interfacing to any environment that exposes a Java API.
Stories can be executed at the same time, stating the number of concurrent threads.
Shallow learning curve as user stories is written in Gherkin or JBehave syntax.
Steps class specifications and annotation-based configuration.
Groovy scripting for writing configuration and Steps instances.
Dependency Injection supports enabling both configuration and stage instances composed through your favorite container (PicoContainer, Needle, Guice, Spring, Weld).
Extensible story reports: outputs stories executed in varied human-readable file-based formats (TXT, HTML, XML). Fully style-able view.
Ant integration- permits stories to be run through an Ant task.
Maven integration: permits stories to be carried out via Maven plugin at specified build stage.

Is JBehave an ideal Java unit testing framework for you?

Beyond project managers, this framework rewards stakeholders, as it assists in improved transparency between test teams and the rest of the enterprise. Moreover, it also offers the following advantages to teams.

Semi-formal language – This particular framework uses a semi-formal language, which is of immense help to the software developers. The presence of a domain vocabulary feature assists in managing consistency in the QA team structure.
Great specifications – Products have better specifications as this form of testing framework for Java descriptively features intuitiveness and reasoning.
Based on the concept of BDD development – JBehave is an ideal BDD automation framework in Java. Its capabilities can be leveraged to generate effective tests after seeking inputs from diverse stakeholders like engineers, product managers, etc.

3. Serenity

Serenity (earlier called Thucydides) is an open-source library perfectly designed for BDD (Behavior-Driven Development). It expands the WebDriver and JUnit attributes. This is also one of the widely preferred test automation frameworks that enable you to write well-structured tests. Serenity can also integrate with existing BDD frameworks such as JBehave.

Besides forming meaningful details for every single test, the tool also shows the traits tested in every test case. One of the best things about Serenity is that it supports a number of automated acceptance test solutions.

You can use this framework with JUnit to rapidly write maintainable tests or incorporate the same with Selenium WebDriver for testing web apps in Selenium. Serenity also supports RestAssured for testing REST API. The framework also allows you to use any BDD (Behaviour-driven Development) tool like Cucumber. You can use it with popular test management tools like JIRA.

Core Features of Serenity

Helps in writing cleaner and maintainable automation & regression tests.
Obtain Business-readable reports for every test.
It can be used for automated web testing with Selenium.
It can be integrated with other popular BDD tools like JBehave, Cucumber, as well as test automation frameworks like JUnit.
Can be integrated with necessities stored in an external source (like JIRA or other test case management tools).

Is Serenity an ideal Java testing framework for you?

Serenity is known for its advanced integration features with popular BDD tools, test automation frameworks, and project management tools. Furthermore, it also provides the following advantages to teams:

Informative Reports – The tool is mainly used to report acceptance criteria. However, the reports captured using Serenity are highly informative in comparison to other BDD frameworks like JBehave.
Test Scenarios of higher quality – Serenity assists developers in writing automated test case scenarios of superior quality. It also offers support for Selenium WebDriver and RestAssured, thereby making it easy for the QA engineers to write automation-based acceptance tests.

4. Selenium

Selenium is an automated open-source (free) application testing framework that is used for cross browser testing. Selenium is a powerful framework to control and manage web browsers through the program. It is functional for almost every browser, works on most popular operating systems, and its scripts can be written in popular programming languages like C#, Java, Python, PHP, and more.

The Selenium Framework reduces the effort involved in the maintenance of the code.

Generally, three kinds of frameworks were created by Selenium for the automation of manual test cases: Keyword Driven Tests, Data-Driven Tests, and Hybrid Tests.

Core Features of Selenium

Selenium Integrated Development Environment gives a record and playback trait for authoring tests and for creating Selenium scripts for future reference.
Selenium supports several programming languages, OSs, and browsers:
- Operating Systems: iOS, Android, Windows, Mac, Solaris, Linux.
- Browsers: Internet Explorer, Google Chrome, Edge, Mozilla Firefox, Safari, Opera, etc.
- Programming Languages: Java, C#, PHP, Python, Ruby, JavaScript, etc.
Supports parallel test execution, which increases efficiency and reduces the test execution time.
It can be integrated with frameworks such as Ant, Maven, etc.

Is Selenium an ideal Java testing framework for you?

It is a robust framework to control web browsers through test automation code. Here’s what makes Selenium one of the most powerful testing frameworks:

Reusability and Integrations – Cloud-based Selenium automation grid-like LambdaTest lets you run Selenium tests at scale. It helps in reducing the investment required for the creation of an in-house Selenium Grid infrastructure. Selenium can be seamlessly integrated with popular test automation frameworks like JUnit, TestNG, and more.
Supported by Large Community – Selenium framework is open-source and has strong backing from the online community.
Language and Framework Support – Supports major programming languages like C#, Java, Python, Ruby, JavaScript, PHP, etc.

5. TestNG

TestNG is a Java-based open-source testing framework. The framework is inspired by JUnit and NUnit. You can also create an HTML report during testing implementation.

It has features like grouping tests, annotations, parameterization, etc., that help in creating tests at a faster pace. These useful set of features makes TestNG a more robust framework in comparison to other test automation frameworks.

Core Features of TestNG

Provides myriad kinds of after/ before annotations for support of distinct setup and cleanup choices.
Allows users to perform data-driven testing
Test suites in this framework are configured mainly utilizing XML files (i.e., testng.xml)
Supports testing integrated classes.
Provides flexible plugin API and flexible runtime configuration.
Supports dependent test methods, load test, parallel tests, and partial failure.
Support for multiple threaded testing.

Is TestNG an ideal Java testing framework for you?

This testing framework comes with systematic approaches and new functionalities to ease the task of testing. Here’s what makes it one of the best testing frameworks:

Annotations, Grouping, and Parameterization – This specific trait is already present in the latest JUnit versions. These features are very helpful in complex projects where you may have to run a large number of test cases. In such scenarios, it’s better to get additional time and deploy this framework rather than depending entirely on other frameworks like JUnit.
Robust Additional Functionality – TestNG covers functional testing, unit testing, integration, and E2E (End-to-End) testing. It has numerous class interfaces and techniques that ease the task of QA engineers.

6. Mockito

Mockito is an open-source and one of the preferred Java unit testing frameworks. This well-known Java-based mocking framework is primarily used for Java app unit testing. The major benefit of using Mockito is that there are no requirements to create mock objects, as the framework generates them automatically. It creates mocks by means of annotations.

Mockito is used for writing behavioral-based development tests with syntactic sugar (i.e., syntax lies in programming languages that assist in trouble-free reading.).

This internally uses the Java Reflection API for creating mock objects for a precise interface. The key goal of using the Mockito Java testing framework is to ease the test development by mocking exterior reliance and utilize it in the test implementation. Therefore, it gives a simplified test code that is understandable and easy to modify. We can also use Mockito with other frameworks like TestNG and JUnit.

Core Features of Mockito

Mock objects reduce external reliance.
Easily create mock objects using annotations like @Mock.
It offers verification on the order of the method calls.
Safe refactoring : As mock objects are formed at runtime, renaming a method or interface does not impact the test code.

Is Mockito an ideal Java testing framework for you?

Mocking is an essential technique of modern-day unit tests. This framework differentiates itself from different mocking or test frameworks by enabling developers to validate the SUT’s behavior (system under test) without setting up expectations. Here are the benefits it offers to the QA team:

Create a proof of concepts or demos : Mocks are cost-effective and ideal for creating POC (proof of concept).
Create tests in advanced TDD : This provides you the capability to add testing to your automated environment in the development procedure. In simple words, Service Mocking lets you exploit the capabilities offered by TDD (Test Driven Development)
Best Void Method Handling : It handles void methods better than other mocking frameworks such as EasyMock.
Class (not just Interface) Mocks: This framework enables you to mock classes and interfaces.

7. HTTPUnit

HTTPUnit is an open-source functional test framework based on JUnit.It imitates browser behavior like Page redirection, Form Submission, cookie management, and JS Validation, to name a few.

HttpUnit is also used to carry out testing of websites without the requirement for a web browser. The framework also supports automatic page redirection, HTTP basic access authentication, HTML form submission, JavaScript, and cookies.

This permits Java test code to process restored pages like XML Document Object Model (DOM), text, or containers of tables, forms, links, etc. This Java testing framework can be integrated with JUnit to write tests with ease.

It gives an API to interact with HTTP and HTML servers.

Core Features of HTTPUnit

Used to test websites without any web browser.
Support for cookies.
Support for the HTTPS as well as HTTP protocols, along with support for HTML responses.
It enables the test of web applications, and due to this, it also assists in regression tests.
HTTPUnit is faster than other frameworks such as Selenium as you do not require a web browser for the tests.
Better JavaScript support enables imitating the actions of the configured browser (Internet Explorer or Firefox).
Proxy server support as well as great JavaScript support.

Is HTTPUnit an ideal Java testing framework for you?

HTTPUnit is a well-suited framework for the execution of automated acceptance tests or functional tests.

Ease of use – HttpUnit imitates the relevant portions of browser behavior, including JavaScript, form submission, cookies, and automatic page redirection.

8. Gauge

Gauge is a Behavior Driven Java testing framework launched by ThoughtWorks.Inc. This is also one of the best Java Testing Frameworks, which allows software engineers to develop automated frameworks and speed up the software development procedure.

This open-source framework for Java takes the stress out of acceptance tests with minimum involvement of code. Like Selenium, this framework for Java can be used with popular languages such as C #, JavaScript, Java, Ruby, and Python.

Core Features of Gauge

An extensive range of templates is accessible in the language of your choice.
Command-Line support eases the integration with popular CI/CD tools.
Easily create your plugin using the open-source Gauge API.
Rapidly identify anomalies through screenshots of event failures.
Enables you to generate scalable tests through parallel execution and provides integrations with cloud-based solutions such as LambdaTest to address the objectives of rapid cross browser testing.

Is Gauge an ideal Java testing framework for you?

This framework continues to make a noteworthy impact by providing numerous rewards for agile teams throughout the DevOps process. Here’s what makes it the ideal testing framework:

Best framework for Cross-browser testing : This framework has revolutionized automated test procedures, allowing even non-technical personnel to write automated tests framework with ease.
Parallel Test Execution : Gauge framework lets you parallelize the tests, thereby letting you run the tests at a fast pace.

9. Geb

Geb brings together the grace of jQuery content selection and the capabilities offered by WebDriver, Page Object Modelling (POM), and clarity offered by the Groovy language. Geb is open-source and licensed in the Apache License (Ver. 2.0).

Gauge can be used to effortlessly perform cross-browser testing using Selenium WebDriver. This framework can be used for normal automation, web scraping, and acceptance (and functional) testing in conjunction with other frameworks like Cucumber-JVM, TestNG, JUnit, and Spock.

Core Features of Geb

It lets you execute the tests at a faster pace.
Compatible with browsers such as Firefox, Chrome, IE, and HTMLUnit.
Well-suited for running regression tests.
While using Geb for automated tests, minimal test code modifications are needed if there are any UI changes in the app (or website). This minimizes the duplication of code.

Is Geb an ideal Java testing framework for you?

Geb can be integrated with popular test automation frameworks like TestNG, Cucumber, Spock, and JUnit.
It supports Page Object Model design pattern (by default).

Conclusion

Developing quality software is a challenging task for any developer. Mastering testing skills is the best way to ensure that you build a product that lasts. Java has evolved over the years, and Java testing frameworks have emerged to keep up with the need for high-quality application performance testing.

The perfect Java testing framework for your app (or website) can be used for performing automated browser tests with ease. Some of the most popular Java testing frameworks mentioned above are highly recommended for Selenium automation testing. LambdaTest, a cloud-based cross browser testing platform, supports all the major Java test automation frameworks and lets you perform testing at scale on 2000+ browsers, browser versions, and platforms.

Choose your framework cleverly to enjoy the features that Java offers and fulfill web applications and tools needed.

How To Get Started With Mobile Website Testing In 2021?

iritesh92 — Thu, 29 Apr 2021 10:46:25 +0000

The growth of Smartphones has fueled the comfort for users to replicate actions like shopping, payments, media consumption, etc., that were earlier done on a desktop or laptop. In the USA itself, mobile makes up to 40% of online traffic (2020), and users love the convenience a smartphone offers.

Digital devices have become a part of our daily lives, and we have become more reliant on them than ever before. Business Insider predicts that smartphones will be the most preferred channel for shopping in the next five years.

This could be happening in real as despite the smaller screens; organizations are innovating and developing one-click checkout processes or optimizing their mobile websites for much easier to transact on smartphones. According to Adobe Retail Shopping Insights, in the 2020 holiday season, conversions from mobile websites saw a 15% increase (YOY) from 1.77% to 2.04%. Thanks to mobile payment apps, they have acted as a catalyst for online shopping.

With the emergence of 5G in the near future, it’s going to be just phenomenal the way users would leverage the potential a smartphone and mobile data would offer. By 2022, mobile data traffic would reach up to 77.5 exabytes per month. This clearly states that businesses need to up their game and innovate, ensuring a mobile-first design that’s easy to navigate and transact.

Having a responsive web design that’s faster and efficient to function across the plethora of devices is a challenge that organizations face. What’s important here is to ensure through rigorous testing that your website provides a unified experience.

However, testing on such a wide array of devices and continuously is complex! In this blog, we will learn more about the approach for mobile web testing, different testing strategies, and tools that can ease out the complexity of your testing process.

First Things First: What is a responsive web design, and why it matters?

For many, the term responsive is not new! However, as we could see the phenomenal growth in mobile users over the years, responsive design has become the crux for any business.

Responsive web design is an approach to ensure the website or content on your website is adaptive on varied screen sizes and devices. No matter how large or small the devices are, responsive web design is here to provide an intuitive user experience.

You might wonder why responsive web design matters when we have mobile apps for that! Well, our expert Mfon from TargetTrend explains this as “the most important source of traffic for most businesses is search engines. When people search for content via search engines, it will most likely lead them to your web pages, not your mobile app. And currently, mobile dominates internet usage.

This is true, as mobile users have dominated internet usage, there is no better time to know that responsive web design matters! eMarkter predicts that by 2024 mobile ad spending in the US would hit 167.25 billion. So if your landing pages or websites are not optimized, now is the time to ensure you have a responsive web design approach.

However, here comes the complexity of making responsive web design principles work across all the devices we have. Developers might face a tough time ensuring the quality of their responsive website. And that’s the reason why testing plays an unrivaled role to make sure the output is matching to your expectations.

Why does mobile website testing matter?

Over the years, new developments in web technologies and frameworks have made it possible for mobile websites to perform better and faster. Businesses are already experimenting with progressive web apps and single-page websites to enhance mobile experiences.

Our expert Simon from avXperten.dk states that visitors and customers usually use mobiles to visit and browse websites, making mobile web testing even more important. In fact, mobile web testing should be an essential practice for any company or business looking to provide and deliver quality service. It’s important to conduct tests frequently as it defines a huge part of the entire customer experience.

In fact, it takes just half a second for a user to form an opinion about your website, whether they would stay or leave. Thus investing in testing should be the primary focus for providing a cohesive customer experience.

Getting started with mobile website testing

I could understand how complex it can get when you need to test your website on various devices, browsers, and platforms. Taking this manually would not be an ideal approach for mobile website testing.

Testing on Chrome Dev Tools

This step can be considered the easiest way to check your mobile view of websites and one of the most prominent methods used by developers. However, it has limitations when you want to scale your testing efforts, and manually doing it might be cumbersome.

Mfon from TargetTrend says, “I have two personal methods I use to conduct mobile web testing. First, I use Chrome Developer tools. Where I can check and analyze almost everything about my mobile web. But the downside of this method is that I can only view things like speed, core web vitals, and more based on my location. Since I have readers in different locations worldwide, I want to know how my site performs in those places with a large user base. For this, I make use of mobile testing tools. It is easy to analyze and understand. A good example of such a tool is LambdaTest.”

Testing on Emulators & Simulators

Other than chrome dev tools, you can use emulators for android and simulators for iOS devices. These help you identify UI, UX bugs and gives you an end-user experience. Although they aren’t the best options to perform mobile website testing as emulators are built to test the native apps, it’s still helpful to have any other options.

LambdaTest offers both Emulator and Simulator testing for free and allows you to get started right away. Simply sign up and get started.

Testing on Real Devices

This is the real deal for testing your mobile websites! Getting your website tested on real devices gives you a clear picture of how the website looks and acts. Jenny from SEO with Jenny explains an ideal approach to perform mobile web testing is to test it on real devices, as it helps test sites under real-world conditions and provides accurate results.

For developers, browser tools might be appealing to test on the go rather than testing on real devices. But real devices might help you explore avenues in testing that a browser tool cannot. For example, you don’t get the screen’s realistic view because of distractions like the URL bar and other toolbars.

One of the most important aspects of testing responsiveness of your mobile website on real devices is network stability. Chris from love2dev states a valid point, “remember to put the devices in airplane mode and use the browser tools to emulate offline mode. This will tell you what your application experience is like under poor or no network conditions.”

As internet access through mobile data is rising steadily, testing your website on different network conditions should be part of your testing process.

Testing Using Automation Tools

All the above-mentioned methods to get started with mobile website testing are perfectly fine to start your testing process. However, what if you want to scale your product faster or complete the project for clients without bugs. This involves a lot of effort if you take the manual approach and is not scalable.

To ensure faster delivery or reduced go-to-market time, it’s important to design a testing process that can be automated for your mobile website. Automation tools can be beneficial here to get the work done at a faster pace. What you need to get started with automation is coding skills and a tool that suits your requirement.

A better option is to leverage cloud automation testing tools with a Selenium Grid on cloud. This cuts down the maintenance costs, and you get a plethora of devices on the cloud to start testing instantly.

LT Browser For Responsive Testing

Mobile website testing tools like LT Browser help you test on different devices resolutions. Using LT Browser, you can streamline UI UX development, test content placement and alignments, assess visually heavy websites on different screen resolutions, and generate your websites’ performance reports.

LT Browser is the most powerful yet affordable mobile friendly tester that lets designers and developers develop, test, and debug visually amazing mobile websites on any screen size.

LT Browser is packed with the following features:

You can tweak the network speed and validate the website behavior on different network conditions.
Run a performance report for your mobile website that helps you identify issues affecting your website’s overall performance and rankings.
One-click bug-logging, integrate with your favorite project management tools, and collaborate with your team for fixing the bugs faster.
Native developer tools to quickly fix the issue and validate your changes on the go.
Enable touch mode, generate full page screenshots, record videos, capture screenshots, and more.

How to build a strategy for testing your mobile websites?

Mobile websites are made for the ease of accessibility of users. Any mobile website’s goal is to provide a seamless experience while the user switches or needs quicker access. Our expert Daniel from Bocain Designs puts a valid point that “Most businesses do not need an app, nor do they even have an app, but they most likely have a website! Your website HAS to work well on a phone to succeed. It’s so important that Google has mobile usability and loading times as a ranking factor.”

However, to ensure that your website gives a pixel-perfect performance across all the devices, you need to devise a clear strategy. Whatever decisions you make in terms of your mobile website’s functionality, aesthetics, or compatibility with browsers, it all needs to be well planned before you start developing it. For best results, create a guide that acts as a flow to your testing process. Let’s deep dive into key tips imperative for your mobile website testing strategy to be successful.

Information Gathering

Gathering the information from the product team, users, or design team should be the key part of your strategy, to begin with. It helps you create a roadmap, set up testing milestones, and prioritize features that you think should be rigorously tested.

Defining the use case

When you gather all the information, the next step is to define the use case of your mobile website testing. Defining the use case comprises the real-world scenarios that would help write better test scripts to yield quality results. For example, what is the target market you will be testing first or what devices, or on what network you should be testing your mobile website.

Identifying these factors would help you orchestrate your testing process better.

Prioritizations

Setting up prioritizations at all levels of the testing process is crucial to any successful testing strategy. Understanding what needs to be done first and how it needs to be done helps you scale up your testing. For example, setting up prioritizations will help you identify if you need to implement automation testing and at what level.

Deciding on the tools

There are an abundance of tools to help you get started with the testing of your mobile website. However, what’s more complex here is to select the right tools or a combination of tools that would solve your problem. This is where prioritization helps. As you identify key factors of your product, you can then decide on the right set of tools.

Ensuring Cross-Browser Compatibility

You need to identify browsers that are popular with your target audience and devise a plan to scale your testing efforts. Not only browsers but a combination of operating systems and different screen resolutions as well. Having a cross browser compatibility testing plan will help deliver the best user experience for your mobile website across different browsers and platforms.

Performance Testing

Identifying performance bottlenecks is one of the most essential aspects of your testing strategy. A slow-loading website might cost you revenue, and you might not be even aware that it’s because of the leak in customer experience. However, a faster loading website increases conversions and can help you rank better to reach the target audience.

Google recently announced that core web vitals would be part of ranking signals starting from May 2021. Core Web Vitals focuses on three key factors of the user experience – page loading time, interactivity, and visual stability. Ensure performance testing is a part of your strategy to test mobile websites.

Conclusion

Mobile devices have been an integral part of lives now. For businesses, having a mobile-friendly website that is functional with a smooth user experience is extremely important. In this blog, I have explained some important elements of mobile website testing, why mobile website testing matters, and an ideal approach that would help you attain quality output.

I hope this article gives you a holistic view of mobile website testing and how you can take the appropriate steps. Let me know if you have any questions related to this or think of any more points that should have been part of this blog. Feel free to share it with your peers, and I would love to know your feedback.

Progressive Web Apps And The Future Of Mobile Web

iritesh92 — Tue, 06 Apr 2021 08:07:21 +0000

The digital consumption over the years has been through a radical change. It’s a revolution that has changed the way people access information over the internet. Of course, with a vertical growth in smartphone users, they are the torchbearers of the digital revolution without any doubt. An increase in mobile usage has upped the game for businesses globally, allowing them to re-strategize their online user experience.

Statista shares insightful data on mobile web traffic that accounts for more than 50% globally from 1st quarter 2015 to 3rd quarter 2020. This increase in web traffic from mobile users comes with an expectation. Users want any accessibility issues to be eliminated and switch faster across desktop websites, mobile apps, or mobile websites. However, not every business could afford to invest and manage a native app other than mandatory desktop websites, and mobile websites come with limitations.

So how would this gap be solved?

It’s the Progressive Web Apps (PWAs) that would lead the app-less revolution. Sounds too good to be true? Let me give you an example to justify my statement,

The travel industry has been revolutionized rapidly over the last two decades, and the internet is fuel to the growth. Trivago understood the importance of disruption after identifying the rise of mobile usage over the years. As a result, Trivago implemented progressive web apps to provide unified user engagement through the mobile web. As a result, Trivago saw a 97% increasein click outs to the hotel offers, along with a 150% increase in user engagement rate. That’s impressive!

The use of mobile devices in today’s time is not just limited to communication only. It’s moved way more beyond that, and businesses need to transform accordingly. The trend of utilizing disruptive technologies for the mobile web has already begun, like how Trivago used PWAs for increasing engagement.

I believe mobile-first is not just limited to having a responsive website or native apps. You also need to think of a solution that would cater to both needs. If PWAs can be built with such ease, providing hassle-free installation and all the value that comes with a website or native apps at a cheaper cost, why not implement it right away? To find an answer to that, let’s understand the basics of PWAs, along with some key differences between PWAs, Native Apps, and Responsive Web.

What are Progressive Web Apps?
Advantages of PWAs
Progressive Web Apps vs. Native Web Apps
Progressive Web Apps vs. Responsive Web Apps
Effect of Progressive Web Apps in different domains
How are PWAs being used by organizations?

What are Progressive Web Apps?

Alex Russell defines Progressive Web Apps as nothing but websites that have taken all the right set of vitamins. Sounds alien? In simple terms, PWAs are well packaged responsive websites that provide a native app-like experience right through the browser itself. You can install and access directly from the home screen, making it lighter on the device storage and helping you with a rich user experience similar to mobile apps.

By combining websites and native apps’ capabilities, PWAs have managed to break the os-device dependency norm. This means, unlike native apps, progressive web apps are independent of operating systems or devices. They offer multi-device/platform support and can be developed easily with the help of HTML, CSS, or JavaScript.

Moreover, PWAs are called to blur the lines between websites and mobile apps, reducing friction and improving user experience, states Daniel Foley. So far, their massive adoption was limited by browser capabilities. However, as browsers evolve to enable PWA features with technologies like Service Workers and Push Notifications, PWAs will continue to grow.

Why Should You Care?

With the odds stacked against it, here are some stats that might help you understand why progressive web apps can revolutionize.

After launching its PWA, Thomas Kent lowered its bounce rate by 57% and increased the revenue from organic traffic by 79%.
PWA for Debenhams helped deliver a 40% increase in mobile revenue and a 20% increase in conversions, driven above-market online growth.
George , a leading UK clothing brand, reduced page load time for shoppers by 3.8x times by following PWA best practices. The business also saw a 31 percent increase in conversion and 20 percent more page views per visit.
Caroline from CocoSign shares how lack of engagement on the website enabled them to develop PWA. It resulted in a 25% increase in conversions and faster loading speeds allowing users to spend more time online.

Advantages of PWAs

Budget-Friendly: With average smartphone app development costs of about $50K, website owners will find it easier to introduce progressive web apps on their existing websites to save on budget and maintenance.
Easy to Maintain: Before building any application, you should always remember both its production and maintenance costs. For any mobile device or web application, the maintenance charge would be approximately 20% of the production cost. Since the expense of creating progressive web apps is less than the price of native apps, maintenance costs would be the same.
Smaller and Lighter: The size of progressive web applications is smaller than native applications. The size of Twitter apps over Android and iOS devices are large, but for PWAs like Twitter Lite, it is around 600 KB.
Lower Bounce Rate: According to Google, most users bounce off when the site takes more than three seconds to load. The average bounce rate for the progressive web app is approximately 42 percent. Progressive web apps are lighter, and page load speed is better than native apps; therefore, they perform better in search engines.
Offline Support: The most important feature of progressive web app development is the ease of access they offer, even if there is zero connectivity. It keeps the information and enables the user to obtain the data by utilizing the Smart cache feature.

Progressive Web Apps vs. Native Web Apps: What are the differences?

Native apps have been the core drivers of technology since Steve Job’s inception of the iPhone, and it just changed how people would use a mobile phone. However, native apps are built for specific operating systems and with a specific set of languages. This depends on the platform’s app store or play store for them to be accessible to the users.

The Fortnite application was recently removed from the Apple App Store, and it sparked mixed reactions across the globe. Similarly, other apps like Paytm being delisted from the google play store ignited conversations on the operating system monopoly.

While progressive web apps are simply websites that use modern web technologies for creating seamless experiences that somewhat replicate the native app experience. They are platform-independent and can be easily built. Our expert Joseph from hotheadtech.com describes PWAs as the best of both worlds, the mobile app and the website built with some greatest development innovations. Well, you don’t have to deal with the app store anymore!

Here are some of the key features that differentiate progressive web apps and native apps.

Progressive Web Apps vs. Responsive Web Apps: What are the differences?

Responsive web apps are a comprehensive approach to deliver a better customer experience on various devices. When mobile devices became popular, responsive web design was the first logical move to make websites more useful for mobile users. It has also rapidly become a fundamental necessity for new websites, and almost most of the web designers have adopted it to provide a seamless digital experience to the end-users;

But responsive web apps could not deliver additional features like offline service, push notifications, or other native app-like functionality that users anticipate from their smartphones. These features are necessary from the marketing perspective to bring user engagement and conversions. This, in turn, enforced businesses to move towards progressive web applications to transform their responsive web applications.

Now, you’re curious how different PWA is from responsive web apps? Here are some of the key features that differentiate progressive web apps and responsive web apps.

Effect Of Progressive Web Apps In Different Domains

According to Bram from vpnAlert, progressive web apps have already started to impact different domains such as businesses, online booking platforms, social media platforms, and media, all of which are shifting towards PWAs. Here are some of the following domains,

Business: After switching to progressive web applications, the business domain will significantly affect the conversion outcome. If you have a web application that has rich functionality and can be launched simply with a click of a button, by definition, it will increase your app usage and go to market delivery.

Media: Smart caching has helped various news portals to increase their interaction rate. When a user visits the website, the particular web page will be saved for later access in the local storage.

Online Booking Platform: Network connectivity has always been a concern when it comes to booking a cab or food ordering. PWA has helped various cab service providers like OLA enhance their network connectivity and conversion rate.

Social Media: The outcome of PWA was very remarkable when it comes to the social media platform. PWAs has helped social media platforms like Twitter and Twitter Lites to optimize their web pages. Twitter has managed to reduce its bounce rate by 20 percent, whereas the Twitter Lite results were impressive, and they also managed to increase the pages per session by 65 percent.

Progressive Web Applications seem to be everywhere and will soon overtake native apps.

How are PWAs being used by organizations?

As the tech sector continues to spend heavily on creative web solutions, PWAs are becoming more prominent. Currently, PWAs are fully supported by popular browsers like Chrome and Opera, while Firefox, Microsoft Edge, and iOS are making great strides in giving additional support for progressive web apps.

Daniel Cooper from Lolly Co says PWAs are quite useful. Being a software developer and managing director of a digital transformation business, he sees PWA making a big difference in the company for some of his clients. For some clients, PWAs have enabled the company to develop a deeper relationship with its customers and build brand loyalty through push notifications, he says.

Similarly, media giants such as the BBC, The Washington Post, and Forbes have also implemented PWAs to spread their content more efficiently through customers across different types of desktop and mobile devices.

How to Test PWAs With LambdaTest?

As the user interface of a PWA is highly dependent on JavaScript components, unit testing will not provide enough coverage. To test a PWA we must emulate real life scenarios and find ways to automate them.

Testing your progressive web application means ensuring that it renders correctly across all major browsers and devices. There are a number of differences between how browsers render web pages, which translates to a lot of extra work to get your site working the same way on Chrome as it does on Safari.

LambdaTest offers you 2000+ combinations of browsers, browser versions, and OS to test your PWAs flawlessly. LambdaTest is one of the world’s leading cross browser testing solutions, providing visual bug detection for every build and real user monitoring to help you track and discover exactly why your site or app broke.

Conclusion

If we compare progressive web apps, responsive web apps, and native web apps, they have their own advantages and disadvantages. However, you have to determine which application suits your requirements. If you want a consistent mobile experience, then you can choose progressive web apps, and if you’re trying to improve site speed and accessibility for most users, responsive web apps may be a better option. Similarly, if you’re looking for performance and want to access the operating system’s features, choose a native web app.

How To Test Mobile Websites On Different Network Conditions?

iritesh92 — Wed, 03 Mar 2021 08:08:13 +0000

Today everyone is on the internet! As per HootSuite, 321 million users added in 2020 itself, taking the total number of internet users close to 4.4 billion. Now this is almost 60% of the global population that uses the internet. Most of these people use mobile to access the internet, and this number is expected to grow.

Even in the past couple years, the desktop traffic continues to dip, & mobile continues to spike. Thanks to high speed mobile networks that have enabled people to search and gain any information in seconds.

According to CNBC, almost three-quarters (72.6 percent) of internet users will access the web solely via their smartphones by 2025, equivalent to nearly 3.7 billion people, making it absolutely crucial to optimize your website for responsive web design.

Earlier, we published an article which talks about the importance of mobile-first design in 2021 and how businesses are already taking progressive steps towards optimizing their mobile website experience. But what needs to be the focal point is having a clear responsive web design checklist in place in place to ensure a seamless user experience. A critical part of that experience is speed.

Do you know you’ll lose out a lot on traffic and sales if your site loads slowly? According to Google, even a 1-second delay in mobile load time can impact conversions up to 20%. Making it crucial for your business success, and in some cases survival, that your website loads faster on mobile.

When testing your mobile website speed, you have to keep in mind that monitoring your website performance on a high-speed internet connection will not provide you accurate results. Why? Because mobile is a different story – it’s not like a desktop on which people usually access the internet on a high-speed connection.

In fact, on mobiles, slow phone data and internet speed are common, especially when people are on the go. This makes it extremely important for you to monitor and test your websites on different network conditions to analyze your website performance. Testing on variable speeds helps you analyze and provide a good user experience on mobile. It will also help you improve your search engine rankings – as search engines prefer websites that load quickly.

Wondering how to test your mobile websites on different networks? Well, the solution is by simulating. With network simulation, you can test how your website behaves on different networks and ensure your website is optimized when accessed on such networks. Network Simulation makes it easier to test and monitor your mobile website and helps you provide a seamless experience to your mobile users.

Why Mobile Experience Is Crucial For Your Business Success And What Are The Roadblocks?

80% of shoppers used a mobile phone inside a physical store to either look up product reviews, compare prices, or find alternative store locations. As discussed above, mobile users have been dominating internet usage, and every business needs to understand how mobile website experience can be the crux of their conversion funnel. In fact, user experience testing is one of the most crucial testing aspects that a brand should adopt.

The reason being a seamless user experience is the primary factor for users while making a purchase. Here are some common complaints of mobile website users:

Historically, the roadblock for the mobile experience was devices, heavy design elements, but what underlines the issue is network conditions. Mobile networks are better when they are under ambient coverage locations, which is a limiting factor. A slower network causes latency and might not render the website to the user leading to higher bounce rates.

According to McKinsey’s report, 61% may not visit the site they had a problem accessing, and 40% might switch to competitors. Though page speed is just one of the many factors that affect rankings, it is an important one.

How LT Browser Can Help in Solving This Problem?

LT Browser is a desktop application that will help you instantly view, build, and debug your mobile website on 45+ mobile, tablet, and even desktop device resolutions. Simulating network conditions is one of the core features of LT Browser that makes it easier for the developers and designer to test the website at the initial stages.

At a click of a button, you can test your website on different network speeds and see how your website looks or behaves at variable speeds. With LT Browser, you can perform a usability test on slow networks and debug on the go. Let’s see how you can leverage the LT Browser for network throttling.

I tested an e-commerce store, Wayfair, using the LT Browser to simulate on different networks for mobile.

Lets analyze how Wayfair’s website performs over a slow 3G network.

First, I logged in to LT Browser, searched for wayfair on Google and changed my mobile network. To do that, I had to click on the network throttling feature and select either a Fast 3G network, a slow 3G network or an offline mode. For this demonstration, I selected the Slow3G option.

After selecting the Slow3G option from network throttling, I then clicked on the debug icon and opened the in-built developer tools. Next, heading to the Performance tab and clicking on the record button to start a new recording.

Guess what?

Wayfair’s website over a slow 3G network took roughly 30,000 milliseconds over a slow 3G network. That is half a minute!!

The website fails to load properly till 30,000 milliseconds over a slow 3G network. That is half a minute!!

The longer it takes for your website to load, the higher bounce rate you are bound to witness. As per Google, the bounce rate spikes drastically for mobile websites after 3 seconds.

How To Improve Mobile View of Websites With LT Browser?

If you are a developer, you can use the LT Browser network throttling to plan in advance on how to project a webpage if there is a network loss or a slow network speed. You can check how your web design behaves on different network conditions and develop optimized designs for the future.

But that’s not all, to improvise your overall page speed you can generate performance reports using in-built Lighthouse Integration. You can analyse best practices, SEO score, accessibility and more to ensure your website’s performance ain’t impacting the user experience and SERP.

This is the performance report of Wayfair over a Fast3G network.

Similarly, developers can test at the early stage of development, ensuring optimal usage of

packages or scripts
removing unnecessary CSS
minifying the CSS or javascript before pushing it live.
Create responsive images.

LT Browser is also packed with rich features to help you with mobile view of website:

Compare the mobile view of website in two device resolutions in a side by side view.
Generates an error report to help you debug any issue while rendering a website.
Third party integrations to help you capture screenshots of bugs, highlight and share it with your colleagues.
Video recording of your test sessions.
Capture full page screenshots of your website.
Built-in media to save all your screenshots and video recordings to access them anytime.
Enable mouse pointer for touch screen scroll experience.
Hot reloading to help you perform responsive testing of locally hosted websites.

Wrapping up:

In this fast-paced online world, customers are acquired or lost in seconds – especially on mobile as these customers are time-starved. For businesses wanting to convert these users into revenue, it is crucial to provide them a seamless experience. If they find your website easy to navigate on fluctuating networks, the tendency to stay back on the website is higher. So it is crucial for your business success and, in many cases, survival to ensure your website is adaptive from the user point of view and ensure it’s accessible across variable network speeds.

With LT Browser, you can check your website on different network speeds and connections. Not just network throttling, but LT Browser comprises features that would help you enhance your overall mobile website developing and testing experience.

How To Get Attribute Value In Selenium WebDriver?

iritesh92 — Mon, 28 Dec 2020 08:35:47 +0000

Testing a web page can be a gargantuan task considering all the elements and variables that come together to make a page work. Selenium automation is a great way to overcome these challenges and automate everything you would manually do. For example, Selenium makes it so much easier to take a screenshot using Python instead of doing it manually every time you come across a website issue.

Similarly, there are multiple scenarios while writing automation test cases when we need to verify a specific attribute on the web page. To ease our execution, the method to getAttribute() in Selenium comes to the rescue. In this blog, we will understand what an attribute is and how we can handle web elements’ attributes using the Selenium getAttribute() method.

Let’s get to it, shall we?

What Is An Attribute?

An attribute in HTML defines the properties of the element. Attributes are made up of name-value pairs, i.e., an attribute has a name and the corresponding value of the same. They are specified in the opening tag, and their values are enclosed in double-quotes. Some of the examples of HTML attributes are:

< a target=”_blank” href=”//www.phptravels.net” class=”btn btn-primary btn-lg btn-block” >
< img src=”https://phptravels.com/assets/img/front.png” class=”well-sm icon-resources img100” alt=”homepage” >
< input style="height:40px; width:300px;" class="form-control newsletter_email" type="text" placeholder="your@email.com" name="email" id="address" >
< button onclick="if (!window.__cfRLUnblockHandlers) return false; subscribe_click()" class="btn btn-primary" value="" >SUBSCRIBE< /button >

As you can see above, the HTML tags have different attributes and corresponding values, like, the input tag has multiple attributes like style, class, type, placeholder, name, and id. Corresponding to each attribute, there is a value in double-quotes, viz, height:40px; width:300px; form-control newsletter_email; text; your@email.com; email and address respectively.

Now that you know all about an attribute for an HTML web element and what it looks like let us see how we can fetch the attribute values with the help of getAttribute() in Selenium WebDriver.

Check out- Using Thread.sleep() in Java with Selenium

Using getAttribute() In Selenium: What, Why & How?

In this section, we will dive deeper into Selenium getAttribute() method. We will be covering everything from what the getAttribute() method is to using getAttribute() in Selenium. We will be using Selenium WebDriver in our instances below.

What Is getAttribute()?

getAttribute() is a method of IWebElement Interface. The IWebElement interface helps in performing all the interactions or operations on the web page elements. The getAttribute() method helps to get the value of any attribute of a web element, which is returned as a String.

If an attribute has a Boolean value, the method returns either True or null. Also, if there is no attribute, the method will return null. We will see all the different attributes and the values that they return in a while, but let us see why we need to use the getAttribute() method before jumping to that part.

Why Use getAttribute()?

Consider a scenario where you need to verify the placeholder text on an input field or maybe the image source or even the field’s dimensions. This is where the getAttribute() method comes to the rescue. You just have to find the web element that contains the attribute and use the getAttribute() method to find its value. Below is a simple line of code that you will have to write-

String value = driver.findElement(by.id(“Web element id”)).getAttribute(“Attribute name”);

In the next section, we will see a working example of fetching the attribute values using the getAttribute() method.

How To Use Selenium getAttribute()?

Now that we have seen the basic syntax of using the getAttribute() method, we will see a working example of fetching values using getAttribute(). We will use a dummy website to write a basic test script. Without further ado, let us quickly see the use case and then proceed with the code.

Use Case-

Navigate to the dummy website.
Get the image source value of the image in the Homepage Front-End and print the same.

Verify the placeholder value of the Join Newsletter text field.

Let us now see how the code for the above use case would look like-

package attribute;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;

public class AttributeTest {

    WebDriver driver;

    //Method to set up the browser and open the dummy website
    @BeforeTest
    public void setUp() {

            System.setProperty("webdriver.chrome.driver", "D:\\Selenium\\drivers\\chromedriver.exe");
            driver = new ChromeDriver();
            driver.get("https://phptravels.com/demo/");
            driver.manage().window().maximize();
    }

    //Test method to get the different attribute values
    @Test
    public void getAttrVals() {

            //Fetching the image source
            WebElement image = driver.findElement(By.xpath("//img[@class=\"well-sm icon-resources img100\"]"));
            System.out.println("The image source is : "+image.getAttribute("src"));

            //Fetching the placeholder value
            WebElement emailField = driver.findElement(By.id("address"));
            String placeholderVal = emailField.getAttribute("placeholder");
            String expectedVal = "your@email.com";
            if(placeholderVal.equalsIgnoreCase(expectedVal))
                    System.out.println("The placeholder value is expected, ie : "+placeholderVal);
            else
                    System.out.println("The placeholder value is not correct --- " +placeholderVal);

            //Getting attribute value of an attribute that is not present on the page
            WebElement logInBtn = driver.findElement(By.xpath("//*[@class=\"btn yx-nfn yx-njg\"]"));
            System.out.println("The value of an attribute that doesn't exist is : " +logInBtn.getAttribute("type"));
    }

    //Method to close the webdriver session
    @AfterTest
    public void burnDown() {
            driver.quit();
    }


}

Code Walkthrough

Let us now do a quick walkthrough of the above code:

The setUp() method sets up the browser instance and opens the URL of the dummy website.
Next, the Test method, viz, getAttrVals() has the code to fetch the attribute values.
- We first locate the image using the XPath and then print the value of the ‘src’ attribute using the WebElement interface method: image.getAttribute(“src”).
- Then we locate the emailField text box and save the String value in a variable using emailField.getAttribute(“placeholder”).
- Next, we use the if-else conditional statements to verify if the fetched value equals the expected value and correspondingly print the console window’s result.
- We then locate the login button on the web page and try to find the value of an attribute that does not exist by using the code- logInBtn.getAttribute(“type”). Note that the attribute name “type” is not present in the tag for the web element.
- After performing the test steps, we jump on to the burnDown() method to close the WebDriver instance.

Output

On executing the above code you will see the result in the console output like below:

As is clearly visible from the test results, the src value for the image is printed on the console window. Next, the placeholder value matches the expected value, and the corresponding success result is printed on the console window. Finally, the value for the attribute that is not present is displayed as blank or null because no attribute name as specified in the test script for the Log In button is present.

Did you see how easy it was to implement the getAttribute() in the Selenium test script? You can use this method as per your requirements to validate a certain functionality of our web application.

Let us now quickly see important points that differentiate getText() , getAttribute(), and getCssValue() methods.

getText() vs getAttribute() vs getCssValue()

While going out on interviews, one of the most frequently asked questions on Selenium automation is stating the differences between various Selenium methods, viz, getText(), getAttribute(), and getCssValue().

getText() is used to get the visible inner text of a web element and the sub elements. By visible, we mean that the text which is not hidden by CSS. You can refer to more about the getText() method from our article on how to get text of an element in Selenium.

getAttribute(String attributeName), as discussed above, is used to fetch the attribute value of an HTML tag of the web element. There are multiple attributes like style, src, placeholder, href, etc. which are passed as a string parameter to the method. The value corresponding to the parameter is returned.

getCssValue(), similar to the attribute values in getAttribute(), you can find the CSS properties of the web elements using the getCssValue() method. You can go through the documentation for the getCssValue() method for your understanding, and we will cover it in a post later.

Implementing Selenium getAttribute() In LambdaTest Grid Cloud

We now know how we can use the Selenium getAttribute() method to fetch web element properties. Next, we will see how we can leverage LambdaTest’s Selenium Grid cloud to run tests in parallel and get the test results by a single execution.

Use Case

Navigate to the LambdaTest website.
Locate the email address text box and fetch the placeholder value.

We will execute this case on the LambdaTest grid to see how the execution results are generated. Subsequently, you can run tests across parallel browsers by referring to our article on using Selenium Grid for automated browser testing for further understanding.

The code for the same would look like below-

package attribue;

import java.net.MalformedURLException;
import java.net.URL;

import org.openqa.selenium.By;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

public class ParallelAttributeTest {


    public String username = "YOUR_USERNAME";
    public String accesskey = "YOUR_ACCESS_KEY";
    public static RemoteWebDriver driver = null;
    public String gridURL = "@hub.lambdatest.com/wd/hub";
    boolean status = false;

//Method to set up the browser and open the lambda test website
    @BeforeClass
    public void setUp() {

            //You need to set desired capabilities which you can generate from Capability Generator from Lambda Test as per your requirements
        DesiredCapabilities capabilities = new DesiredCapabilities();
            capabilities.setCapability("browserName", "chrome");
            capabilities.setCapability("version", "81.0");
            capabilities.setCapability("platform", "win10"); // If this cap isn't specified, it will get any available one
            capabilities.setCapability("build", "LambdaTestProject");
            capabilities.setCapability("name", "LambdaTestGetAttributeValueProject");
            capabilities.setCapability("network", true); // Enables network logs
            capabilities.setCapability("visual", true); // Enables step by step screenshot
            capabilities.setCapability("video", true); // Enables video recording
            capabilities.setCapability("console", true); // Captures console logs
            try {
           driver = new RemoteWebDriver(new URL("https://" + username + ":" + accesskey + gridURL), capabilities);
            } catch (MalformedURLException e) {
           System.out.println("Invalid grid URL");
            } catch (Exception e) {
           System.out.println(e.getMessage());
            }
    }

    //Test method to get the attribute value
    @Test
    public void getAttrVals() {

            driver.get("https://www.lambdatest.com/");
        driver.manage().window().maximize();
        System.out.println("The attribute value is : " +driver.findElement(By.id("useremail")).getAttribute("placeholder"));

    }

    //Method to close the webdriver session
    @AfterClass
    public void burnDown() {
            driver.quit();
    }
}

You will see the execution results under the Automation tab of your LambdaTest dashboard on running the above test.

You can also see the placeholder value is printed in the Eclipse console window, indicating that our getAttribute() method fetched the correct results.

Now you can smoothly run your Selenium automation tests on the LambdaTest Grid for enhanced parallel execution along with extensive support for report generation.

Conclusion

To sum up – in this blog:

We understood what an HTML attribute is and why it is placed in the opening tags.
We saw the know-how about the getAttribute() method of Selenium WebDriver, with details on what it is, why we use it, and finally implemented it in a dummy application.
We saw how efficiently we could use the getAttribute() method to verify the web elements’ different characteristics.
We saw how getText() and getCssValue() are different from the getAttribute() method of Selenium WebDriver.

Finally, we implemented getAttribute() in the Selenium Grid cloud offered by LambdaTest. It is safe to say that getAttribute() is pivotal to Selenium test automation, especially when it comes to fetching and interacting with specific web elements. On the plus side, using a cloud-based Selenium Grid lets you do this for a combination of 2000+ browsers & operating systems. That’s easily the best way to use getAttribute()!

Happy testing!

Best Jenkins Pipeline Tutorial For Beginners [Examples]

iritesh92 — Mon, 28 Sep 2020 11:17:31 +0000

Jenkins CI/CD has always been the goto option for DevOps professionals and beginners. It has more than 16,000 stars on GitHuband 6,500 forks. Being one of the oldest players in the CI/CD market, Jenkins has huge community support with more than 1500 plugins to help professionals ship faster through their Jenkins Pipelines.

Whether you are just starting off your CI/CD journey or are looking for a quick recap over Jenkins Pipeline, then you’re at the right place!

This Jenkins pipeline tutorial will provide all the information that you need to set up a Jenkins pipeline and a detailed explanation of the underlying concepts. You will also learn how to perform automation testing using Selenium in Jenkins Pipeline through an online Selenium Grid.

For beginners, I am going to talk about the basic principles of Continuous Integration before we deep dive further into this Jenkins Pipeline tutorial. In case you are already familiar with it, feel free to skip this section.

What Is CI (Continuous Integration)?

Continuous Integration is a development approach in which members work on the same project coordinate to integrate their work more frequently. The code is integrated into a shared repository, and any integration is tested by automated test cases or sequences to look for an error. Each team member is expected to integrate their code at least once a day or more as and when required.

CI’s definition was first developed almost two decades ago to prevent “integrating chaos,” which occurs when integration is postponed to the end of production. Once the code is committed, and the software build process is successfully completed, the CI tool immediately tests the code. If the test is passed, the CI tool deploys the code and pushes it into the production process. This entire process of committing, building, testing, and deploying goes on continuously in software development, and thus it is known as “Continuous Integration.”

The CI process consists of four key elements which help in the execution:

Hosted CI Tool Solution
Virtual Machine
Version Control System
Tools

It was always a major challenge for firms to set up, configure, and manage a constant workflow. Owing to rapid changes over the last few years, software development has taken a big step forward ever since the introduction of Continuous Integration & Continuous Delivery (CI/CD). Now, that you understand what role CI plays in software development, we can move on to this Jenkins pipeline tutorial’s central objective.

What Is Jenkins?

Jenkins CI/CD is a continuous integration open-source tool. It has been developed using Java. This allows real-time monitoring and recording of discrete improvements to a more comprehensive codebase. It lets developers easily identify, fix bugs in their codebase, and simplify their builds’ validation. Jenkins is the most popular CI/CD tool because it closely monitors repetitive jobs and assists in automated execution during a project’s production.

Jenkins CI/CD is a cloud-based system that can work as a standalone application running on a server of its own. Alternatively, it can also utilize a web server like Glassfish, JBoss, or WebSphere. Using Jenkins, developers can speed their product creation cycle because Jenkins can simplify the build and test instantly. Jenkins CI/CD promotes the entire software development cycle (SDLC) by designing, testing, monitoring, deploying, and other phases of the cycle.

Advantages Of Jenkins CI/CD

An open community operates Jenkins. They host public meetings each month and seek feedback from customers on the progress of the Jenkins initiative.
Jenkins also embraces cloud-based design to facilitate cloud-based platforms.
Jenkins offers over 1500+ extensions in its plugins folder. Through plugins, Jenkins CI/CD is much more efficient and mature in comparison to other tools.
Jenkins CI/CD offers fantastic support for parallel test execution. This helps accelerate existing test processes by running them in parallel.

While Jenkins CI/CD offers multiple benefits for developers, it is not perfect. Some of the major pain points of using Jenkins are complicated installation & customization, outdated layout, and the need for some prior experience in project management.

Yet these points are not significant enough to stop developers from adopting Jenkins because it still offers few of the best features in the whole CI/CD universe. The next section of this Jenkins pipeline tutorial will explain why Jenkins CI/CD is still the first choice for developers worldwide.

What Is Jenkins Pipeline?

Inside Jenkins CI/CD, a pipeline is defined as a series of events or tasks which are interconnected in a particular order. In simple terms, Jenkins pipeline is a set of modules or plugins which enable the implementation and integration of Continuous Delivery pipelines within Jenkins.

The Jenkins pipeline has an expandable automation system for building basic or complicated ‘template’ distribution pipelines via the Domain-specific language (DSL) used in the pipeline. There are four states of Continuous Delivery in Jenkins pipeline-

Build
Deploy
Test
Release

We will discuss these states in detail in the next sections of this Jenkins pipeline tutorial. For now, let’s talk more about why you need the Jenkins pipeline.

Why Use Jenkins Pipeline?

As explained above in this Jenkins pipeline tutorial, Jenkins CI/CD plays a significant role in delivering high-quality applications or products. We are now aware that Jenkins has proved to be a specialist in Continuous Integration, Continuous Testing, and Continuous Delivery. It uses a feature called Jenkins pipeline for Continuous Delivery, which is basically the ability to release apps regularly at an interval. This process ensures that the software is always ready for production.

To dive deeper into this Jenkins pipeline tutorial, we need to understand the advantages offered by the pipeline of Jenkins CI/CD.

Advantages Of Jenkins Pipeline

The highlight of Jenkins pipeline is that it offers the feature to define the complete deployment flow-through configuration and code. It states that all the standard Jenkins jobs can be written manually as an entire script and can be managed with a version control system.

It’s essentially following the discipline of ‘pipeline as code.’ Hence instead of creating multiple jobs for each process, it allows us to code the entire workflow and place it in a Jenkins file. Below are some of the reasons that one might consider before using the Jenkins pipeline for Jenkins test automation with Selenium.

By using Groovy DSL (Domain Specific Language), it models easy to complex pipelines as code.
The code is stored in the form of a text file called ‘Jenkinsfile’ that can be scanned into Source Code Management.
It supports complex pipelines by adding conditional loops, forks, or joining operations and allowing parallel execution tasks.
It improves user experience by integrating user feedback into the pipeline.
It’s resilient in terms of Jenkins’ master unplanned restart.
It can resume from checkpoints saved.
It can incorporate multiple additional plugins and add-ins.

Next up, we learn about Jenkinsfile in this Jenkins pipeline tutorial.

What Is Jenkinsfile?

To move ahead with our Jenkins pipeline tutorial, we need to understand the role of Jenkinsfile. It is a text file that stores the whole process as code in our local machine. It can be reviewed in a Source Code Management (SCM) platform such as Git. It is instrumental as it helps the developers to view, edit, and test the code whenever required.

The Jenkinsfile is written using the Groovy Domain-Specific Language and can be generated using a text editor or the Jenkins instance configuration tab.

There are two different types in which the Jenkins pipeline can be constructed. These are the syntaxes-

Declarative pipeline syntax
Scripted pipeline syntax

The Declarative pipeline is a relatively new feature that supports the concept of code pipeline. It enables the reading and writing of the pipeline code. This code is written within a Jenkinsfile, which can be tested into a tool such as Git for source control.

The Scripted pipeline is a typical method of code writing. The Jenkinsfile is written on the Jenkins user interface instance in this pipeline.

While both of these pipelines are Groovy-based, the scripted pipeline uses more strict Groovy-based syntaxes. This is because it was the first groovy foundation pipeline that was created for use. As this Groovy script was not usually suitable to all users, it introduced the declarative pipeline to provide a simpler and more flexible Groovy syntax. The declarative pipeline is defined within a ‘pipeline’ block, while the scripted pipeline is defined within a ‘node’ block.

How To Install & Run Jenkins On Windows?

It’s time to get to the best part of this Jenkins pipeline tutorial and start the whole set up process. First of all, we need to install Jenkins. Jenkins can be installed on either Windows, Unix, or macOS systems. In this Jenkins pipeline tutorial, we’re just going to concentrate on Windows installation.

Pre-requisites:

Before you start to downloading Jenkins on your Windows system, Jenkins needs the following prerequisites:

Hardware Specifications:

You require a total of 512 MB of RAM to run Jenkins on your device or laptop.
You require at least 1 GB of storage on your hard drive.

Software Specifications:

Because Jenkins is based on Java, you need either the latest Java Development Kit (JDK) or Java Runtime Environment (JRE) versions based on your system configuration 32-bit or 64-bit.

Steps For Installation

Step 1: Once all the prerequisites are met, download Jenkins from this web address https://jenkins.io/download/

Step 2: Once you open the Jenkins download page, you will be prompted to select the platform you intend to download Jenkins. Click on Windows (or other options based on your system). For this Jenkins pipeline tutorial, we will be choosing Windows.

Unzip the downloaded kit. Double-click the unzipped jenkins.msi file. You may also use the .war file to install Jenkins as a Java Package. This is recommended if you are focused on Jenkins test automation with Selenium in non-headless mode.

Step 3: Select ‘ Next ’ button to continue the installation of Jenkins on your windows computer or laptop.

Step 4: Select the directory where you’d like Jenkins version to be installed (the default setting is C:\Program Files (x86)\Jenkins), then press the ‘ Next ’ tab.

Step 5: Click on Install.

Step 6: Upon finishing the Jenkins setup process, you can continue further and start the setup. The next steps should instruct you on how to unblock the Jenkins submission. Upon completion of the Jenkins installation phase, a window tab will show up requesting for the Administrator’s initial password.

Step 7: You have to proceed to the below path in your web browser to access Jenkins.

localhost:8080

Once you can navigate the URL above, it will indicate that Jenkins has been properly installed on the system.

Step 8: The initial Administrator password can be located in the Jenkins setup path. A file named Initial Admin Password can be located at installation-directory >\Jenkins\secrets\ initialAdminPassword

Step 9: Once you have entered the password on the Jenkins login page, you will now be prompted to choose the requisite plugins for your personalized project. You can select the ‘ Install suggested plugin ’ for proceeding with the default list of plugins, or you can choose the plugins you want by clicking on ‘ Select plugins to install.’

You will then see a Getting Started page that will install all the necessary plugins required to get you started with Jenkins CI/CD.

Step 10: Once all the recommended plugins have been downloaded, the ‘ Create First Admin User ’ tab will appear. Fill all boxes with the account info you like and press the ‘ Save and Continue ’ option.

Step 11: Once this information is duly filled, a webpage may ask you for URL data. This URL is utilized to set the default configuration path for Jenkins. Keep it as it is to prevent any confusion later on. Nevertheless, if another program is still utilizing an 8080 port, you can either stop that program from using the port and make Jenkins’ space and then save the settings.

Or you can change the port number, which we recommend in this Jenkins pipeline tutorial. To change the port, go to < Jenkins-installation-folder >\Jenkins\jenkins.xml

Search for the httpPort and change it from 8080 to any port number of your choice. Jenkins is set to listen to port 8080 by default.

You might be prompted to have administrator rights for implementing this port change. Follow this-

<service>
  <id>Jenkins</id>
  <name>Jenkins</name>
  <description>This service runs Jenkins automation server.</description>
  <env name="JENKINS_HOME" value="%BASE%"/>
  <!--
    if you'd like to run Jenkins with a specific version of Java version, specify a full path to java.exe.
    The following value assumes that you have java in your PATH.
  -->
  <executable>%BASE%\jre\bin\java</executable>
  <arguments>-Xrs -Xmx256m -Dhudson.lifecycle=hudson.lifecycle.WindowsServiceLifecycle -jar "%BASE%\jenkins.war" --httpPort=9090 --webroot="%BASE%\war"</arguments>

Once you do this, you’re through with Jenkins deployment. After this step, the Jenkins account will be set up and is ready to use.

Step 12: Jenkins is enabled, and we’re almost finished. Before we switch to build as per this Jenkins pipeline tutorial, we will need to customize Jenkins to recognize other resources like Java, Maven, etc.

Click on ‘ Manage Jenkins.’ After this, select ‘ Global Tool Configuration ’ and then select ‘ JDK Installation.’ Include the JDK version’s name in the JDK Name line and access the Java route in the ‘ JAVA HOME ’ portion.

Uncheck the ‘ Install Automatically ’ radio option, because there might be a risk that Selenium may not help if the latest Java version is modified. Save the changes and continue.

Jenkins Pipeline Tutorial Concepts

We hope that Jenkins is up and running in your Windows system, following the steps mentioned above in this Jenkins pipeline tutorial. Before moving ahead with Jenkins test automation with Selenium, it is time to get accustomed to some of this Jenkins pipeline tutorial’s crucial concepts.

Here they are-

Pipeline

It is a user-defined framework that includes all the processes like create, check, deploy, etc. In a Jenkinsfile, it’s a list of all the levels. All of the stages and steps within this block are described. This is the fundamental block to the syntax of a declarative pipeline.

pipeline  {

}

Node

A node is a system running a complete workflow. It’s an integral part of the syntax of the scripted pipeline.

node  {

}

Some standard sections are available to both declarative and scripted pipelines. These are:

Agent

An agent is described as a directive that can run multiple builds using just one Jenkins instance. This feature helps spread the workload to various agents and execute multiple projects within Jenkins’s single instance. It instructs Jenkins to assign the builds to an executor.

A single agent may be defined for a whole Jenkins pipeline, or different agents may be assigned to execute each stage within a pipeline. Some of the most commonly used Agent parameters are:

Runs the stage pipeline on any available agent.

None

This parameter is added to the root of the pipeline. It means that there is no global agent for the entire pipeline, and each stage must define its own agent.

Label

Performs on the labeled agent the pipeline/stage.

Docker

This parameter uses a docker container as a pipeline execution environment or as a specific level. For example, the docker can be used to pull an image of Ubuntu. This image can now be used to run multiple commands as an execution environment.

pipeline { 
    agent { 
        docker { 
            image  'ubuntu'
                }
            }
        }

Stages

This section includes all of the work that needs to be completed. The work is defined in the form of stages. Within this Directive, there may be more than one level. Each stage executes a particular task.

pipeline { 
agent any 
    stages { 
        stage ('Build') { 

        }
        stage ('Test') { 

        }
        stage ('QA') { 

        }
        stage ('Deploy') { 

        }
        stage ('Monitor') { 

        }

    }           
 }

Steps

Within a stage block, the pipeline can be described as a series of steps. Such steps are performed in sequence for the execution of a level. Within a Steps guideline, there must be at least one step.

pipeline { 
    agent any 
        stages { 
            stage ('Build') { 
                steps { 
                    echo 
                    'Running build phase. ' 
                }
            }
        }
    }

Integrating Jenkins Pipeline With Cloud Selenium Grid

This Jenkins pipeline tutorial’s point was not just to get you acquainted with Jenkins CI/CD or the pipeline itself. Yes, we wanted to help you set up a Jenkins pipeline but then you must be wondering what’s the purpose of this entire setup. As pointed out earlier in this Jenkins pipeline tutorial, Jenkins pipeline is quite useful in executing Selenium test automation. For implementing this, Jenkins provides various plugins available for integration with various tools and utilities while also monitoring productivity.

To get started with Jenkins test automation with Selenium, LambdaTest Jenkins plugin is one such plugin to help you speed up automated cross browser testing. With the LambdaTest Jenkins plugin, we can easily automate our test scripts by connecting the Jenkins CI instance to the LambdaTest Selenium grid.

LambdaTest Selenium grid offers us a great range of 2000 + browsers and browser versions to achieve higher test coverage while using the Selenium test suite to conduct cross browser testing.

The integration of Jenkins with LambdaTest will increase your test quality and coverage by:

Configuring the credentials for LambdaTest and the job scheduled with Jenkins.
Performing a setup and tearing down the binary Lambda Tunnel file to conduct automated cross browser testing even on your local web applications.
Providing all test data, such as video logs, network logs, and screenshots, in each of the steps performed at various stages with your Jenkins job via LambdaTest.

For Jenkins test automation with Selenium, you would require access to the following-

An account at LambdaTest. You can register here.
An existing server with the Jenkins CI (version 2.138.2+)
A root-access Jenkins Client.

Configuring LambdaTest Jenkins Plugin

To move ahead with the most exciting section of this Jenkins pipeline tutorial, we would need to download the LambdaTest Jenkins plugin as explained below in order to run our Selenium tests on LambdaTest using Jenkins. Before proceeding with installing Jenkins, it is required to provide access to the administrator level.

Before moving ahead with the installation of the LambdaTest Jenkins plugin, make sure you have no active build jobs in execution or queue.

Step 1: First, we click on Manage Jenkins and then Manage Plugins.

Step 2: Then, we navigate and click on the Available tab.

Step 3: Search for LambdaTest in the filter search box on the tab.

Step 4: You will find a list of plugins on which proceed and select LambdaTest.

Step 5: For installing the LambdaTest Jenkins plugin, we need to select the checkbox in front of LambdaTest.

Step 6: After the successful installation of the plugin, you will be able to find the LambdaTest Jenkins plugin under your plugins installed.

Sometimes, your newly installed plugins fail to synchronize with the Jenkins plugins you have available. This is quite common. If you fail to find LambdaTest under your available plugins section, you can do this. Refresh the Jenkins plugin list by simply clicking the Check Now button, and you will get a list with new plugins from the Jenkins update center.

Once the LambdaTest Jenkins plugin installation is done, we would need to integrate our Selenium WebDriver tests with Jenkins by configuring the LambdaTest credentials in the Jenkins CI server. This step is essential if we want to move ahead with Jenkins test automation using Selenium or even to perform automated cross browser testing.

Configuring LambdaTest Credentials

To proceed with this Jenkins pipeline tutorial configuration, we would need to work with the Jenkins UI. We don’t have to prepare the script separately from scratch for executing the Lambda Test Platform test. We can reuse our local test script and just add some of the minor configuration changes that will enable us to connect to the cloud platform.

One of the most important and the most vital things for us to connect to the Lambda Test platform is to get our access key token. The access key tokens are a set of private keys that enable us to connect to the cloud platform and execute automated tests on the platform. This access key is unique for everyone and should not be shared with other users. You can fetch and regenerate it from the Profile section of your user account, as shown below.

Alternatively, we can also fetch the access key, username, and hub details from the Automation dashboard. You’ll need to click on the key-shaped icon near the Help button, as shown in the image screenshot below.

This can be set as below in the script-

$ export LT_USERNAME= {your lambdatest username} 

$ export LT_ACCESS_KEY= {your lambdatest access_key}

$ set LT_USERNAME= {your lambdatest username}

$ set LT_ACCESS_KEY= {your lambdatest access_key}

Once we have done that, we need to follow the steps below in order to configure it in Jenkins-

Click Credentials on Jenkins Home Page.
Select System under the Credentials tab to display the System page
Select Global Domain credentials (Unrestricted) in the System to open the page for Global credentials.
Click on Add Credentials to open the credentials page where we add the access details.
Enter your relevant data in all the fields and click Verify Credentials.
Then click the Ok button after verification.
Jenkins generates the ID that appears on the Credential page, and we save the changes.

After successfully attaching your credentials, Jenkins creates an ID. To get this ID for using LambdaTest credentials, you’d need to go to Jenkins’s homepage and click on the Credentials on the navigation screen’s left side.

From the home page of Jenkins, click on Credentials from the menu on the left. LambdaTest credentials can be copied from this ID.

Next, we would need to use the LambdaTest Jenkins plugin to enable LambdaTest Tunnel to perform cross browser testing on locally hosted web pages or web files.

Creating A Jenkins Pipeline & Running Our First Test

In the last section of this Jenkins pipeline tutorial, we will create a Jenkins CI/CD pipeline of our own and then run our first test. Below is the sample Jenkins File for the Pipeline, which has the required configuration details.

#!/usr/bin/env groovy

node {
    withEnv(["LT_USERNAME=Your LambdaTest UserName",
    "LT_ACCESS_KEY=Your LambdaTest Access Key",
    "LT_TUNNEL=true"]){

    echo env.LT_USERNAME
    echo env.LT_ACCESS_KEY 

   stage('setup') { 

      // Get some code from a GitHub repository
    try{
      git 'https://github.com/LambdaTest/nightwatch-selenium-sample.git'

      //Download Tunnel Binary
      sh "wget https://s3.amazonaws.com/lambda-tunnel/LT_Linux.zip"

      //Required if unzip is not installed
      sh 'sudo apt-get install --no-act unzip'
      sh 'unzip -o LT_Linux.zip'

      //Starting Tunnel Process 
      sh "./LT -user ${env.LT_USERNAME} -key ${env.LT_ACCESS_KEY} &"
      sh  "rm -rf LT_Linux.zip"
    }
    catch (err){
      echo err
   }

   }
   stage('build') {
      // Installing Dependencies
      sh 'npm install'
    }

   stage('test') {
          try{
          sh './node_modules/.bin/nightwatch -e chrome,edge tests'
          }
          catch (err){
          echo err
          }  
   }
   stage('end') {  
     echo "Success" 
     }
 }
}

Step 1: We create a New Project for the Pipeline by navigating to Jenkins and then click on New Item.

Step 2: Next, we select Pipeline from the given list of options.

Step 3: Then, we will scroll down to Advanced Project Options and paste the pipeline script code that we saw above into the code pane and hit the Save button.

You’re now ready to run your first test using LambdaTest Jenkins plugin.

Step 4: We would need to set up a test build, which can be quickly done via the Jenkins UI by clicking Build Now.

Step 5: We can see a new build generating under the build history as we click on Build Now. The console logs output can be viewed by clicking on the Build.

Clicking on LambdaTest Icon on the left will provide more details about the Selenium tests. This will also provide more insight into Jenkins test automation with Selenium, like the test sessions, video logs, etc. on the page loaded.

Conclusion

A well-defined Jenkins pipeline can help shorten production times and improve the quality of applications. It provides a definitive structure to your existing building process, committing, automation testing, and deployment.

I hope this Jenkins pipeline tutorial was helpful for you and you were able to create your first Jenkins Pipeline successfully and incorporate automation testing using an online Selenium grid like LambdaTest. Happy Testing!