How To Create An Automated Website

Customer interaction is increasingly happening online.

This means that websites and web applications are crucial to generating revenue.

It also means that businesses must accelerate digital transformation and migrate front and back office applications from desktops to web-based interfaces or the cloud.

In this guide, you will learn how you can secure a smooth digital transformation with web automation.

1. What is Web Automation?

Web automation is the concept of letting software robots perform pre-defined actions, tasks, and processes on a web browser or web application.

What can you do with web automation?

Think of all the clicking and typing you do at your desk every day involving websites and web-based applications. All these actions can be automated with web automation.

Actions that can be automated include:

Filling out forms and fields
Scraping content from a web page
Extracting and transferring data between applications
Clicking buttons and elements

Every day, in businesses of all sizes, there are scenarios where automating tasks like these would come in handy. For example:

Importing contacts into a CRM system from a third-party service
Testing the user experience and order handling of an online shop
Integrating a web-based ERP-system with a document management platform in the cloud

What is Selenium browser automation?

When talking about web automation, there is no way around Selenium, the world's most popular open-source framework for automating browsers.

The Selenium tool suite consists of:

Selenium WebDriver, an automation tool built for automating in the browser
Selenium IDE, a record and playback tool
Selenium Grid, a parallel testing tool

In the following, we'll focus on Selenium WebDriver.

Learn more about Selenium automation in our whitepaper.

All components of the Selenium suite are open-source tools for automation of websites and web applications, and not other types of applications, such as desktop.

WebDriver is an API that can automate any action that takes place in a web browser. It drives browser actions natively, meaning that it interacts with browser elements, such as clicking on buttons and typing text in fields, like a real user would.

Selenium WebDriver is operated by writing code in a programming language, such as C#, JavaScript, PHP or Python.

Creating a Selenium script is a 7-step process as described in SauceLabs' Selenium introduction:

selenium test script process

Below is an example of what a Selenium test script can look like. In this case, the WebDriver is instructed to:

Open a Chrome browser
Navigate to the web page amazon.com
Input the term "Lego" in a search field
Wait for the page to load results
Click on one of the items in the search results
Conclude the test case by verifying the presence of a specified

As illustrated by this case, a considerable amount of programming proficiency is required to understand, let alone create, a relatively simple script.

selenium test script

The pros and cons of Selenium

Selenium is one of the most widely used frameworks for web automation, with good reason. The software's strengths include:

Open source and free of cost
Highly extensible
Can run cases across different browsers
Supports various operating systems
Supports mobile devices
Can execute cases while the browser is minimized
Can execute cases in parallel

Selenium vs. Leapwork Automation

Leapwork is also a web automation tool that uses Selenium 'under the hood', but offers additional features and benefits.

In the comparison chart below, you can see the main differences between the two automation tools.

Selenium automation	Leapwork web automation based on Selenium
Requires programming to use.	Does not require the user to read or write a single line of code.
Building automation cases takes time, requires specialized programming knowledge, and generates a lot of maintenance work.	Web automation is made easy with a visual language that everyone can understand, reducing set-up and maintenance time.
Requires an automation framework.	Does not require an automation framework.
Only automates web applications.	Automates web and desktop applications as well as virtual and legacy software.
Does not come with a built-in object repository.	All elements and files (i.e. 'Locators') used in automation cases are automatically saved in an object repository.
Data-driven automation is complex since you must rely on the programming language's capabilities for the setting values for your data.	Data-driven automation is easily done by visually connecting data sources to automation flows.
No support other than user communities.	Access to on-demand support from automation specialists.
Has no native capability to record or export runtime data onto external formats.	Runtime data is automatically generated as logs and video recordings, and results can be pushed to release platforms and pipeline orchestrators.
Parameterization can be done via programming but is difficult to implement.	Parameterization is easily done by adjusting configurations and connecting sources in the automation tool. No programming needed.
No native support to generate bug reports.	Reports are automatically generated. These can be visualized in dashboards and exported to stakeholders.

Watch the video below to see how quickly and easily an automation flow can be set up in Leapwork compared to Selenium.

2.How to Build Web Automation

Imagine if each action and operation listed below was a building block that you could connect to make up visual workflows representing web-based processes.

Operating browsers to navigate the web
Interacting with web elements, both static and dynamic
Inputting/outputting data, text, and numbers

That's the idea behind Leapwork's Selenium-powered web automation blocks. The example below automates the following process:

Search for an item ("star wars lego") in an online shop (amazon.com) and then compare the number of search results with a specified value (2500).

Codeless selenium web automation flow

The automation flow outlined in this example is created by connecting just seven commands, or building blocks:

Example of 7 step web automation

This approach of using visual building blocks to design processes enables automation of practically any web application and websites in any of the common browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, and Internet Explorer.

DOWNLOAD THE EXTENDED GUIDE TO WEB AUTOMATION

The extended guide includes:
1. A guide to web automation
2. A test automation strategy checklist
3. A web automation tool comparison chart

Common web-based operations and functionalities to automate

As mentioned above, web-based tasks and processes typically involve operating browsers, interacting with web elements, and inputting or outputting data.

Examples include: typing credentials into an authentication form, dragging and dropping elements on a web page, and uploading a file to a web application.

Some operations are more challenging than others to automate, meaning they require a few more configurations to make a robot perform the operation correctly.

With Leapwork, you use building blocks to set up automation flows. So to find a specific element on a web page, for example, you just need a simple "Find Web Element" block.

To verify an 'infinite scroll' functionality on a web page, it's slightly more complex; you need to do a minor configuration in the same block and then customize the strategy by removing the unique references to the captured element and making selection criteria generic.

However, you can still instruct a Leapwork robot to perform even this slightly more complex example without having to write a single line of code.

Read how to automate web elements: Testing the Internet

Now that we have covered the fundamentals of web automation, let's take a closer look at how web automation is used across organizations to solve various challenges.

Codeless automation in action

3.Web Automation use cases

Web automation is applicable to processes involving any website and web application, both external and internal. Below are some real-life examples of how organizations are benefiting from web automation.

Automating ticket creation and service desk requests

At a major utility company managing critical infrastructure for energy and gas, all service desk requests are managed with ServiceNow, a web-based business process platform.

ServiceNow is a great example of an application that can be automated with the codeless Selenium-based automation approach outlined above.

This has allowed them to significantly reduce the time spent on testing in relation to system upgrades. The time saved has been allocated to business-critical tasks, such as customer support.

As a result, the company has been able to deliver better services to their customers, faster.

Read the full story: Utility Company Frees up Customer-Facing Resources

More frequent system upgrades +
Earlier fixing of system bugs +
Security risks reduced =
Better customer experience

Automation of industry-specific back office systems

Back office functions are increasingly being handled with web-based applications – even industry-specific ones, such as Policy Management Systems (PMS) in the insurance sector and Transport Management Systems (TMS) in logistics companies.

From an automation perspective, this move to web-based technologies simplifies things: Any application that can be operated using a web browser can be automated with the approach described in this guide.

For example, an insurance company moved from quarterly to monthly releases of their policy management system by automating the testing of their system, which was based on the web application Pega.

Another example is a global logistics company who automated their web-based online booking system that integrates with their TMS, reducing weeks of work to the few clicks required to instruct robots to perform repetitive tasks.

E-commerce automation

E-commerce plays a key role in selling and purchasing products and services today: Digital and mobile storefronts, electronic transfer of funds, web-based inventory systems, and online marketing are just a few of the different aspects of e-commerce.

Automating front and back-end processes for monitoring and testing purposes can help enhance the robustness and quality of an e-commerce channel. This involves:

Ensuring the functionality of an online shop from an end-user perspective
Continuous monitoring of the operational status across channels

Automating CRM workflows

CRM systems have great automation potential; they are used for processes that go across departments and functions, they are often web-based, and the tasks involved are often repetitive.

Salesforce, for example, is a top tier CRM solution for enterprises and organizations. It offers cloud services for managing sales, marketing, help desk requests and more. It's highly customizable and can be configured and extended to fit almost any requirement.

Salesforce involves many repetitive tasks that, if not automated, take time from Salesforce users, such as sales reps and marketeers.

Learn more about automating Salesforce in our blog post Test and Process Automation and in our whitepaper Get started with Salesforce automation.

Automating intranets and extranets

Web automation is not only for public systems. For example, a global manufacturer of medical devices automated a SharePoint-based service portal monitoring devices and systems at thousands of hospitals worldwide.

How to drive web automation with data

Web-based automation flows often involve repetitively inputting data, for example to fill out a form several times. There are several ways to feed data into automation flows, either by using static data sources, like spreadsheets, or dynamic sources, like databases, web services, and command shells.

4.Excecuting Web Automation

When it comes to executing web automation flows, there are two major concepts you need to know about:

Hosted environments: This is about executing automation flows across devices and systems using cloud-based services.
Parallelization: This means running automation flows on several machines at once.

How to set up hosted environments for automated web testing

To deliver a great end-user experience, web applications and websites must work across multiple browsers, browser versions, operating systems, and devices, including mobile.

With all the possible combinations, there is a large number of usage scenarios to be tested. One provider of hosted environments for automated web testing, Sauce Labs, at one point identified more than 2,000 devices and more than 800 browser-OS combinations – and those were just the most commonly used.

From a testing perspective, a question presents itself: Is it necessary for your organization to host all the possible combinations of browsers, operating systems, and devices in your own infrastructure to support automated web testing?

This would come with additional costs and a massive administrative burden negatively impacting the business case for test automation.

Fortunately, you can outsource the hosting of test environments to vendors such as BrowserStack and Sauce Labs.

What follows is a walk-through of how to use hosted environments for web automation.

Besides access to a provider of hosted environments, setup only requires a few things: A suite of automated test cases ready to be executed, and a service running the test cases, called the Controller.

hosted environments for web automation

web automation with hosted environment

With this setup, a test team does not have to worry about preparing and maintaining the machines and devices on which the test cases are executed. For example, it is not necessary to purchase, maintain, and charge multiple mobile devices.

Continued reading on how to:
Automate Web Testing Across Browsers and Devices

Parallelization of Web Automation

Besides using environments hosted by cloud-based providers as described above, there are other ways to parallelize web automation, including execution agents and Selenium Grid.

Execution Agents – on local, remote, or virtual machines

An execution agent is a piece of software that is installed on every machine where automation cases are run.

Agents allow for a great deal of flexibility, as they can execute automation commands on both local, remote, and virtual machines. Agents can be installed in multiple and separate environments, including cloud servers. This enables easy collaboration across teams and even across organizations, for example, if you work with an automation partner.

Selenium Grid

Selenium Grid is a server for setting up different environments in which automation cases are executed. It is based on a Hub-Node concept and can be set up in your own infrastructure.

Selenium grid Hub node system

The Hub is the central machine running the automation cases, and the Nodes are different machines on which the actual browser automation takes place. The advantage of Selenium Grid is the ability to run multiple cases in parallel across different browsers, operating systems, and machines.

Tutorial:
Setting up a Selenium Grid

The different options for parallelizing web automation with Leapwork are illustrated below. The Leapwork Controller is the test runner service, and Leapwork Studio is where users design their automated test cases. Learn more about the different deployment options with Leapwork.

parallelizing web automation

The two major cloud-based providers of hosted environments, Sauce Labs and BrowserStack, are both supported by the Leapwork Automation Platform. This makes it incredibly easy to set up hosted environments for automated web testing.

Benefits	Limitations
Leapwork Agents Fast, affordable, flexible. Allows for multiple deployment setups.	Leapwork Agents Does not require the user to read or type a single line of code.
Selenium Grid Fast and free of charge.	Selenium Grid Requires setup and maintenance.
Hosted Environments from Cloud-based Environments Allows for practically infinite parallelization.	Hosted Environments from Cloud-based Environments Usually very expensive. Expensive capabilities might be redundant.