Selenium Testing CPQ
CPQ is a Salesforce sales app that allows you to easily create quotes with a minimal error rate and very little effort. Copado has built CPQ smart locators so that you can leverage Copado Selenium Testing with CPQ. In this article, we will explain what CPQ smart locators are and we will describe each of them in detail.
Introduction to CPQ Smart Locators
CPQ pages generally do not use valid html elements (input, select, textarea), but rather their own tags, div or span containers for you to type. Also, these pages don’t provide unique identifiers for each element, and since items are sometimes sortable, css locators might not work in this case. That’s the reason why Copado has built smart locators for CPQ. What Copado does is identify the current row and column and generate a unique mark for us to locate an element.
Copado uses product codes as a reference in the quote table to locate an element via smart locators. Quote tables in the edit lines page columns can be changed via the Line Editor field set in the Quote Line object. If you don’t remove Salesforce CPQ package’s Product Code field, the order of columns is not relevant for our extension to successfully create a smart locator. However, If you want to remove this field and use your own custom field instead, please make sure that this is the first field of the Line Editor field set in the Quote Line object.
Copado’s Selenium extension uses a special separator (~-~) in the smart CPQ locators in order to be able to locate these DOM elements easily with as much info as needed. Please make sure your product does not contain ‘~-~’ so that Copado can successfully create locators in the extension for your test.
To successfully record Inline Edit functionality, make sure to use the pencil icon instead of a double click.
On the Product Selection page, products do not exist in the DOM before they are visible on the page, hence Copado’s Selenium extension performs a two-way scroll to have the desired products in the DOM and locate them.
Let’s go ahead and take a look at each of the smart locators.
CPQ Smart Locators
This locator is used when you check a radio or a checkbox within CPQ pages. It identifies them via their nodes and css classes. The values under param 2 column (checked, unchecked) are just for information for the cpqCheck locator, since there are no parameters for the click command. We also use #nth information in the locator if the list has more than one item with the same product code.
This locator is used when you want to inline edit items’ quantity, additional discount etc. inside the product list on the edit quote page. When you click on the pencil icon inside the list in some of the columns, such us additional discount, you will see one input for typing and one select list to select. We identify the correct selection by adding ~-~type or ~-~select to our newly created smart locator. Even if you have two input fields instead of one input field and one select list, we place #nth in our smart locator to be able to identify which field you have typed into.
This locator is used when you click on any button or link on any CPQ page which is not actually a button or a link. We generate the locator based on the value or on the unique Id. Also, we use some additional information to avoid generating our locator with #nth when there is actually just one option, for instance ~-~fv for favorite-related items, ~-~cp to configure product-related items, etc.
This locator is used in the input, select and textarea html elements on the edit line page. It locates the correct item based on the label and the #nth locator. We also use some additional information to avoid generating our locator with #nth when it is not needed, for instance: ~-~fv for favorite-related items, ~-~cp to configure product-related items, etc.
This locator is not used on edit line pages. It applies to select lists on the pages you are being redirected to via the buttons on the Quote page layout (Generate Document, Preview Document, etc.).
This locator is used when you click on table header columns to sort rows in the table. This locator is generated from the header text, and if there is more than one item with the same label, then we locate the right element by using #nth in the smart locator.