> For the complete documentation index, see [llms.txt](https://docs.precisiontestautomation.in/scriptlessautomation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.precisiontestautomation.in/scriptlessautomation/get-started/open-code-automation/web-automation.md).

# Web Automation

### Introduction

This guide provides a step-by-step process to set up and run a Maven project with Scriptless Automation for web testing. It includes adding dependencies, configuring plugins, and setting up the necessary configurations for web automation.

### Prerequisites

Before you begin, ensure you have the following installed on your system:

* Java Development Kit (JDK)
* Apache Maven
* IntelliJ IDEA (or any preferred IDE)

### Project Setup

#### 1. Create a Maven Project

Create a new Maven project in your IDE or via the command line.

#### 2. Add Dependencies

Add the Scriptless Automation dependency to your `pom.xml` file:

```xml
<dependencies>
  <dependency>
    <groupId>in.precisiontestautomation.scriptlessautomation</groupId>
    <artifactId>scriptlessautomation-web</artifactId>
    <version>LATEST</version>
  </dependency>
</dependencies>
```

#### 3. Add Plugins

Add the following plugins to your `pom.xml` file to configure the execution of the main class and testing framework:

```xml
<plugins>
  <plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>exec-maven-plugin</artifactId>
    <version>3.1.0</version>
    <executions>
      <execution>
        <goals>
          <goal>java</goal>
        </goals>
      </execution>
    </executions>
    <configuration>
      <mainClass>in.precisiontestautomation.runner.ScriptlessApplication</mainClass>
      <arguments>
        <argument>true</argument>
      </arguments>
    </configuration>
  </plugin>
  <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-surefire-plugin</artifactId>
    <version>3.0.0-M4</version>
    <configuration>
      <argLine>-XX:+ExplicitGInvokesConcurrent</argLine>
      <argLine>--add-opens java.base/java.lang.reflect=ALL-UNNAMED</argLine>
      <testFailureIgnore>false</testFailureIgnore>
      <suiteXmlFiles>
        <suiteXmlFile>target/testngenerator.xml</suiteXmlFile>
      </suiteXmlFiles>
    </configuration>
  </plugin>
</plugins>
```

### Configuration

#### 4. Add Scriptless Configuration

To execute Scriptless Automation, add the following configuration files in your project:

```plaintext
project
 └── config
     ├── browserConfiguration
     │   └── chrome.properties
     ├── reportConfiguration
     │   └── extentReportConfiguration.properties
     └── testNgConfiguration.properties
```

**4.1 browserConfiguration/chrome.properties**

This file contains the configuration settings for the Chrome browser.

```properties
# Chrome Browser Configuration
# Chrome prefs
chrome.prefs.profile.default_content_settings.popups=0
chrome.prefs.profile.default_content_setting_values.media_stream_camera=1
chrome.prefs.javascript.enable=true
chrome.prefs.credentials_enable_service=false
chrome.prefs.profile.password_manager_enabled=false
chrome.prefs.profile.downloadPath=target

# Chrome options
chrome.options.excludeSwitches=enable-automation
chrome.options.no-sandbox=true
chrome.options.disable-dev-shm-usage=true
chrome.options.mockWebCamPath=path/to/mock/webcam
chrome.options.headless=false
chrome.options.window-size=1920,1080
chrome.options.start-maximized=true
```

**4.2 reportConfiguration/extentReportConfiguration.properties**

This file contains the configuration settings for the Extent Reports.

```properties
# Extent Report Configuration
ReportName = AutomationReport

#DARK , STANDARD
Report_Theme = DARK
Report_JS = for (let e of document.querySelectorAll (".details-col")) { e.innerHTML ='Steps' };
Report_CSS = .header .vheader .nav-logo>a .logo {min-height: 52px;min-width: 52px;}
Report_logo = "/config/logo.jpg"
Report_captureScreenshotOnPass = true
```

**4.3 testNgConfiguration.properties**

This file contains the TestNG configuration settings.

```properties
# TestNG Configuration
ReportName = AutomationReport

Browser = chrome
Env = sandbox
ThreadCount= 1

FAILED_RETRY_COUNT=0
SET_TEST_SUITE_NAME = Scriptless
SET_TEST_NAME = Regression Testing

TEST_DATA_SECTIONS=All
TEST_IDS=LoadUrl
DISABLE_TEST_IDS=

GROUPS=All
```

#### 5. Add Test Data

Add the necessary test data to your project. This involves creating a directory structure to store test data files and ensuring they are accessible to your test scripts. Use the following directory structure:

```plaintext
project
   └── test_data
       └── web
           ├── page_object_locators
           │   └── locators.properties
           ├── test_case_flows
           │   └── TestDirectory
           │       └── TestID_GroupName.csv
           ├── dynamic_strings
           │   ├── qa
           │   │   └── test.properties
           │   └── sandbox
           │       └── test.properties
           └── page_screenshot
```

**5.1 test\_data/web/page\_object\_locators/locators.properties**

This file contains all the locators used in your web pages. Learn more [here](/scriptlessautomation/automation-platforms/scriptlessweb-automation/page_object_locators.md)

```properties
Example locators
email = XPATH -> //*[@id="identifierId"]
userName = XPATH -> //*[@id='fullname']
```

**5.2 test\_data/web/test\_case\_flows/TestDirectory/TestID\_GroupName.csv**

This file contains test case flows and steps for each test. Each directory under `test_case_flows` represents a feature.

```csv
# Example test case flow
PAGE_NAME,WAIT_TYPE,SCROLL_TYPE,ELEMENT_NAME,ACTIONS,SEND_KEYS,VALIDATION,VALIDATION_TYPE
NONE,NONE,NONE,NONE,LOAD_URL,https://www.gmail.com/,NONE,NONE
```

**5.3 test\_data/web/dynamic\_strings**

This file contains environment-specific dynamic strings

```properties
# Example dynamic strings for QA
baseUrl=https://qa.example.com
```

**5.4 test\_data/web/page\_screenshot**

This directory stores different page screenshots to do UI testing.

### IntelliJ IDEA Setup

#### 6. Add IntelliJ Run Configuration

Create a run configuration in IntelliJ IDEA to run your Maven project. Follow these steps:

1. Go to `Run > Edit Configurations`.

   <figure><img src="/files/vjbattihvBgvlPhzi6Y4" alt=""><figcaption></figcaption></figure>
2. Click on the `+` icon and select `Application`.

   <figure><img src="/files/Pp2AZ9dHDdr3FXEbNgKF" alt=""><figcaption></figcaption></figure>
3. Set the name for your configuration (e.g., `runner`).

   <figure><img src="/files/vSJYINER2AB8O6OAri3K" alt=""><figcaption></figcaption></figure>
4. Click on Apply

#### 7. Run CLI Command

To execute the project, use the following CLI command:

```bash
mvn clean exec:java test
```

This command will run the main class defined in the `exec-maven-plugin` configuration.

### Conclusion

By following this guide, you have set up a Maven project with Scriptless Automation for web testing. You configured the necessary dependencies, plugins, and run configurations to execute your web automation tests.

### Next Steps

* Customize your test scripts according to your web application requirements.
* Explore more features of Scriptless Automation to enhance your test coverage.
* Integrate additional tools and frameworks as needed for comprehensive test automation.

### Video Tutorial

{% embed url="<https://youtu.be/Q2LJMTQETzU>" %}