Hi Community members, 
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. 
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).
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>
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
//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 
or heart 
To read other KShare articles, simply naviagte to the support tag, or go to our Docs section.
