QA-102 Sprint Summary

Modified on Fri, 19 Apr, 2024 at 7:11 PM

Introduction to Web Elements

Web elements are fundamental components of web pages that users interact with. In this sprint, we focused on understanding and interacting with various types of web elements, including checkboxes, radio buttons, dropdowns, calendars, and web tables.

Checkbox/Radio Buttons

Checkboxes and radio buttons are HTML elements that allow users to make selections on a webpage. In checkboxes, multiple selections are possible, while radio buttons allow the user to choose exactly one item from a group of options.

HTML Representation:

<!-- Checkbox -->
<input type="checkbox" id="checkbox_id" name="checkbox_name" value="value">

<!-- Radio Button -->
<input type="radio" id="radio_button_id" name="radio_group_name" value="value">

Actions on Checkbox/Radio Buttons

Selenium provides the following methods to interact with checkboxes and radio buttons in Java:

click(): To check a checkbox or select a radio button.

WebElement checkbox = driver.findElement(By.id("checkbox_id"));
checkbox.click(); // Check the checkbox

WebElement radioButton = driver.findElement(By.id("radio_button_id"));
radioButton.click(); // Select the radio button

isEnabled(): To check if a checkbox/radio button is enabled to be checked/selected.
```
boolean isEnabled = checkbox.isEnabled();
```
isDisplayed(): To check if a checkbox/radio button is displayed on the webpage.
```
boolean isDisplayed = checkbox.isDisplayed();
```
isSelected(): To check if a checkbox/radio button is already checked/selected.
```
boolean isChecked = checkbox.isSelected();
```
getAttribute(String attributeName): To retrieve the value of a given attribute of the web element.
```
String value = checkbox.getAttribute("value");
```
getSize(): To get the size of the web element on the webpage.
```
Dimension size = checkbox.getSize();
```
getLocation(): To get the relative position of an element where it is rendered on the webpage.
```
Point location = checkbox.getLocation();
```

Dropdowns

A dropdown, also known as a select box or combo box, is a user interface control that allows users to choose one or more options from a predefined list. When the dropdown is clicked or activated, the list of options expands, enabling the user to make a selection.

Types of Dropdowns

Single-select dropdown: Allows the user to select only one option from the list.
Multi-select dropdown: Allows the user to select multiple options from the list.

HTML code behind Dropdowns

Dropdowns are typically created using the <select> and <option> HTML tags.

<select id="dropdown_id" name="dropdown_name">
    <option value="option1">Option 1</option>
    <option value="option2" selected>Option 2</option>
    <option value="option3">Option 3</option>
</select>

Actions on Dropdowns

Selenium provides the Select class to interact with dropdown elements in Java.

Actions on Dropdowns

Selecting an option by visible text:

WebElement dropdown = driver.findElement(By.id("dropdown_id"));
Select select = new Select(dropdown);
select.selectByVisibleText("Option 2");

Selecting an option by value:
```
select.selectByValue("option2");
```

Selecting an option by index:

select.selectByIndex(1); // Selects the second option

Getting the selected option(s):

WebElement selectedOption = select.getFirstSelectedOption();
List<WebElement> allSelectedOptions = select.getAllSelectedOptions();

Deselecting options (for multi-select dropdowns):

select.deselectAll();
select.deselectByVisibleText("Option 2");
select.deselectByValue("option2");
select.deselectByIndex(1);

Check if dropdown supports multiple selection
```
select.isMultiple()
```
Get number of all present options for selection
```
select.getOptions()
```
Get first selected Option
```
select.getFirstSelectedOption()
```

Calendars

A calendar is a user interface control that allows users to select a date or a range of dates. Calendars are commonly used in web applications for booking systems, scheduling appointments, or entering date-related information.

Actions on Calendars

Interacting with calendars in Selenium can be challenging due to the variety of calendar implementations and the dynamic nature of their elements. Here are some common approaches:

Approach for sending date directly to the WebElement

Identifying calendar elements and interacting with them directly:

WebElement calendar = driver.findElement(By.id("calendar_id"));
WebElement dateField = calendar.findElement(By.cssSelector(".date_field"));
dateField.click();
dateField.sendKeys("06/15/2023"); // Enter the desired date

Using the executeScript method to interact with the calendar:

WebElement dateField = driver.findElement(By.id("date_field_id"));
((JavascriptExecutor) driver).executeScript("arguments[0].value = '06/15/2023'", dateField);

Leveraging third-party libraries or custom scripts specifically designed for handling calendar interactions.

Approach for Selecting Date

Find the calendar element

WebElement calendar = driver.findElement(By.id("calendar_id"));

Navigate to the desired month and year

WebElement monthYearElement = calendar.findElement(By.className("month-year"));

String desiredMonthYear = "June 2023";

while (!monthYearElement.getText().equals(desiredMonthYear)) {
    WebElement nextMonthButton = calendar.findElement(By.className("next-month"));
    nextMonthButton.click();
}

Select the desired date

List<WebElement> dates = calendar.findElements(By.className("date"));

for (WebElement date : dates) {
    if (date.getText().equals("15")) {
        date.click();
        break;
    }
}

Web Tables

A web table is a structured representation of data in tabular form, consisting of rows and columns. Tables are commonly used in web applications to display and organize information in a readable and searchable format.

Types of Tables

Static tables: The table content is fixed and defined in the HTML code.
Dynamic tables: The table content is generated dynamically, often through JavaScript or AJAX calls, and can change based on user interactions or data updates.

HTML code behind Web Tables

Web tables are typically created using the <table>, <tr> (table row), and <td> (table data) HTML tags.

<table id="table_id">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </tbody>
</table>

Actions on Web Tables

Interacting with web tables can be more complex due to their dynamic nature and varying implementations. Here are some common actions:

Getting the number of rows or columns:

List<WebElement> rows = driver.findElements(By.xpath("//table[@id='table_id']/tbody/tr"));
int rowCount = rows.size();

List<WebElement> columns = rows.get(0).findElements(By.tagName("td"));
int columnCount = columns.size();

Accessing a specific cell:

WebElement cell = driver.findElement(By.xpath("//table[@id='table_id']/tbody/tr[2]/td[1]"));
String cellValue = cell.getText();

Iterating over rows and columns:

List<WebElement> rows = driver.findElements(By.xpath("//table[@id='table_id']/tbody/tr"));

for (WebElement row : rows) {
    List<WebElement> cells = row.findElements(By.tagName("td"));
    for (WebElement cell : cells) {
        System.out.println(cell.getText());
    }
}

Navigating Web Tables

Find the table element

WebElement table = driver.findElement(By.id("table_id"));

Get all rows

List<WebElement> rows = table.findElements(By.tagName("tr"));

Iterate through each row and get the cell in the row, Iterate through the cells to check for the expected text and perform the required action

// Iterate through each row
for (WebElement row : rows) {

    // Get all cells in the current row
    List<WebElement> cells = row.findElements(By.tagName("td"));

    // Iterate through each cell and perform desired actions
    for (WebElement cell : cells) {
        String cellText = cell.getText();
        // Perform actions with the cell text
        System.out.println(cellText);
    }
}