[KShare] Handling Tables, Sections, and Overlays in Salesforce using Katalon Studio

Hi Community members, :wave:

In our last article about Salesforce testing with Katalon, we are going to cover about different types of sections, tables, and overlays that you may encounter throughout the environment. :point_down:

Sections

  • General Section: A general section will typically use a <div> or <flexipage> HTML tags to denote the section break.

  • List Section: Within a general section, there may also be a list located within it, denoted by <ul> and <li> HTML types.

Table: Some tables in Salesforce have “combined cells”.

Overlays: In Salesforce, these overlays use the <div> HTML tag.

Overalys are popup ‘windows’ that appear over the Salesforce webpage, typically they are seen when using the Close All Tabs function or for customized workflows (such as submitting a ticket).


Below we will review several different examples ò these types and provide examples and scripts to show how they can be implemented with Test Cases.

Tables

Tables contain rows, columns, and cells that allow for a structured list of multiple items with multiple details. The example below shows us a table for “tickets” / “cases”, within each row we can see that there are multiple forms of data that can be interacted with, such as the name, a checkbox, and the ticket number for the cases.

Typically, with the structure of the tables in Salesforce, we are able to locate the elements using their XPATH with no additional configurations necessary. However, some tables in Salesforce have “combined cells”. While this is not the case in the screenshot above, the way this would look is that the “ID” number (16, 17, 18, etc.) would be located within the same cell as the checkboxes that are seen. When this occurs, we first have to select the cell containing the element we want to locate (ID in this example) and then we have to select the correct element within the cell. This would typically appear as two separate elements nested within the cell.

If more advanced data gathering is required for the table, such as gathering all of the data from the table, the following code can be implemented and adjusted to the required usage. At the moment, this particular code can traverse the entire table to scrape data, but is designated to search for the first cell in the first row of the first column:

'Locate driver for advanced driver command use'
WebDriver driver = DriverFactory.getWebDriver()

'To locate table'
WebElement Table = driver.findElement(By.xpath('//table/tbody'))

'To locate rows of table it will Capture all the rows available in the table'
List<WebElement> rows_table = Table.findElements(By.tagName('tr'))

'Locating Column 1 + Row 1'
List<WebElement> Columns_row = rows_table.get(0).findElements(By.tagName('td'))

'Saving the first element in Cell 1-1 to a variable'
WebElement cellElement = Columns_row.get(0)

'Click on the element'
cellElement.click()

The adjustment points in this script would be on lines 11 and 14 with the integer 0. This 0 denotes that we are looking for the cell in the first row (line 11) and the first column (line 14).

:information_source: For instance, changing line 11’s integer to 3 and line 14’s integer to 4 would locate the cell in the 4th row and 5th column. Loops can be added for greater automation of scraping the data of the entire table if needed.

Sections

Sections are located all over the webpage on Salesforce as different “boxes” of content. These sections can contain general information, lists, links, or various other types of information. The two most commonly seen sections are the general “box” dividers splitting the relevant content into different areas of the page and list sections, which work the same as the general “box” dividers but contain a list of information located within them as well.

General Section

A general section will typically use a <div> or <flexipage> HTML tags to denote the section break.

List Section

Within a general section, there may also be a list located within it, denoted by <ul> and <li> HTML tags. The <ul> tag denotes the start of the list and contains the entire list inside of it, while <li> contains each individual item within the list structure.

Overlays

Overlays are popup ‘windows’ that appear over the Salesforce webpage, typically they are seen when using the Close All Tabs function or for customized workflows (such as submitting a ticket).

In Salesforce, these overlays use the div HTML tag, for instance for the Close All Tabs overlay:

<div class="modal-container slds-modal__container" data-aura-rendered-by="85740:0">...inner HTML code here...</div>

image

Contained Elements

In some situations, an element’s locator may need a secondary locator so the webdriver can accurately locate it when it is nested with certain sections, overlays, tables, or lists. The way this can be achieved is by combining the outer element’s locator (for example //div[@class=‘slds-section’]) with the inner element’s locator (for example //a[@title=‘Submit Button’]), with the inner element being the item that we are trying to interact with. Therefore combining the two together tells the webdriver to first look for the section container element and then within that look for the element we want to interact with, so for the previous examples of outer and inner elements, it would appear as //div[@class=‘slds-section’]//a[@title='Submit Button].

There are several ways to interact with combinations and modifiers with the locators, please refer to the documentation below for more information:

Example - Follow button contained within a <div> section

Cause: When we try to locate the Follow button using the locator we have created, //button[@class=‘slds-button slds-button–neutral uiButton’], the log is telling us that it cannot find this element.

Reason : The Follow button is being obscured from the view of the webdriver by the outer <div> element containing it.

Solution: Since the Follow button is hidden or obstructed from the webdriver it cannot be easily located on its own with the locator we have. Therefore, we can provide the webdriver more context to the Follow button’s location by combining the Follow button’s locator with the locator of the outer HTML element containing it, in this case, the

it is located in. It would appear as:

//div[@class='highlights slds-clearfix slds-page-header slds-page-header_record-home']//button[@class='slds-button slds-button--neutral uiButton']

We hope the sharing above helps you much in your cases when working with Salesforce.

If you have other cases and want to share them with us, please feel free to leave your comment below. And, of course, if you find this article helpful, don’t forget to leave us a big like :+1: or heart :heart:


To read other KShare articles, simply naviagte to the support tag, or go to our Docs section.

4 Likes

Thank you very much the Product Support team @support.squad and @jordan.bartley for your contribution to the KShare series thus far!

Jordan profile pic
Jordan Bartley (@jordan.bartley) - Product Support Specialist
Jordan is a Product Support Specialist on Katalon’s US Support Team. He has worked in Quality Assurance, Automated Testing, and Specialist Support roles for several years before joining Katalon. Through his experience, he shows an innate desire to assist clients, take on challenging problems, and work cross functionally with team members to create new solutions.
1 Like

This is Part 4 of our Salesforce-focused series in January 2024. To read the other articles within this series, you can go to the topic below …

or navigate to the support tag.