Gwen supports locating elements on web pages using all the standard Selenium selectors and additionally by JavaScript too. In this post, we are going to explore them. To make it a little more fun we will use the Gwen REPL which will enable us to verify our locator expressions interactively against a running web application in a browser as we go.
Get started with Gwen and enter the following command in a terminal:
Linux/Mac/PowerShell:
./gwen
Windows DOS:
gwen
The REPL will start with a gwen> prompt open:
__ ___ _____ _ __ _
/ _` \ \ /\ / / _ \ '_ \ { \,"
| (_| |\ V V / __/ | | | {_`/
\__, | \_/\_/ \___|_| |_| `
|___/
Welcome to gwen-web v2.35.1
INFO - Environment context initialised
INFO - gwen-web.sh -r target/reports -p gwen.properties,browsers/chrome.properties,env/local.properties
REPL Console
Enter steps to evaluate or type exit to quit..
gwen>
In the examples that follow we are borrowing the Selenium Test Page from automationtesting.com to demonstrate locating web elements using all of the available mechanisms in Gwen.
Keep in mind that Gwen is case sensitive. So you will need to use the same casing that is shown in all the examples here.
Enter the following step into the REPL to have Gwen open up a new browser session with the Selenium Test Page all ready and loaded (you can copy and paste the step if you like):
When I navigate to "https://automationintesting.com/selenium/testpage/"Locating elements with Selenium selectors
We’ll start with ID locators which simply locate elements by their HTML id attribute. The Selenium Test page that we have open in the browser has a First name field in it. If we right click and inspect that field in the browser we will see that it is defined in HTML as follows:
<input id="firstname" type="text" placeholder="Enter your first name">
Enter the following step into Gwen REPL prompt to define a locator named firstNameById for finding this field:
Then firstNameById can be located by id "firstname"
This will instruct Gwen to bind the name firstNameById to the By.id("firstname") Selenium locator under the hood. We can test that it works by entering the following at the REPL prompt:
When I locate firstNameById
Gwen will find and highlight the field in yellow inside the browser session that we opened. If you missed it, rearrange your REPL and browser windows a bit so you can see both side by side and repeat the last command (you can use the up arrow in the REPL to recall the last command).
Now that we have proven that our firstNameById locator binding works, we can perform an operation on the field by referencing it by name in any one of the predefined DSL steps that Gwen supports for web automation. For example, we can type a name into the form by entering the following step into the REPL:
And I type "Gwen" in firstNameById
Gwen will locate and enter the name in the field.
Similarly, we can also locate the form in the page which is defined in the page HTML as:
<form id="contactus" name="contactform">
Let’s locate by name this time. Enter the following step into Gwen REPL prompt to define a locator named formByName for finding this form:
Given formByName can be located by name "contactform"
This will instruct Gwen to bind the name formByName to the By.name("contactform") Selenium locator . We can test it by entering the following at the REPL prompt:
When I locate formByName
Gwen will find and highlight the form in inside the browser. We can then submit the form by entering the following step into the REPL:
And I submit formByName
Gwen will locate and submit the form. Let’s exit the REPL and see how we can use the locators we just defined to execute a Gherkin feature file. Type exit at the gwen> prompt to return to your OS.
exit
Create a subfolder named se-test inside the features subfolder of your Gwen workspace. Then create and save a new text file named SeleniumTestPage.feature in that subfolder with the following content:
Feature: Selenium Test Page
Scenario: Submit the test form
Given I am on the Selenium test page
When I provide some contact details
And I submit the test form
Then nothing should happen
Create and save another text file named SeleniumTestPage.meta in the same subfolder with the following content:
Feature: Selenium Test Page Meta
@StepDef
Scenario: I am on the Selenium test page
When I navigate to "https://automationintesting.com/selenium/testpage/"
Then firstNameById can be located by id "firstname"
And formByName can be located by name "contactform"
@StepDef
Scenario: I provide some contact details
When I type "Gwen" in firstNameById
@StepDef
Scenario: I submit the test form
When I submit formByName
@StepDef
Scenario: nothing should happen
Then the current URL should end with "?"
Type the following command at your OS terminal prompt to have Gwen load the meta file and bind it to the feature file to automate execution:
Linux/Mac/PowerShell:
./gwen features/se-test
Windows DOS:
gwen features/se-test
Gwen will execute the feature by performing all the same actions we performed earlier in the REPL and will leave the REPL session open when done. The locators we defined are now bound in Gwen’s memory and we can continue experimenting with them in the REPL if we wish. Enter the following command to have Gwen submit the form again:
When I submit formByName
Enter the 3rd step in our feature directly into the REPL:
And I submit the test form
Gwen will match it to the 3rd @StepDef annotated Scenario in the meta file by name (this is how step definitions work in Gwen) and execute all the steps that we defined there. Type exit at the Gwen REPL prompt when you are ready to return to your OS.
We just demonstrated how you can locate an element by id with Gwen. You can use the same approach to locate elements using any one of the other standard Selenium locator mechanisms. Borrowing some locator examples from Friendly Tester’s Free Selenium Course, here is how you would define the equivalents in Gwen:
Given genderByClass can be located by class name "gender" And firstNameByXPath can be located by xpath "//*[@id="firstname"]" And linkByTag can be located by tag name "a" And linkByCSS can be located by css selector "div a" And linkByLinkText can be located by link text "Our Policy" And linkByPartialText can be located by partial link text "Policy"
If you load these locators into the Gwen REPL or define them in your meta file, you will then be a able to perform operations on those elements such as:
When I select "Female" in genderByClass And I clear firstNameByXPath And I click linkByTag
Locating elements with JavaScript
We said at the beginning that Gwen can also locate elements by JavaScript. Sometimes this can help us locate dynamically rendered elements more reliably.
If you wanted to, you could define the form locator using a vanilla JavaScript expression like this :
Given formByJS can be located by javascript "document.getElementsByName('contactform')[0]"
Or a form locator using a JQuery expression (if the jquery library is loaded in the browser page) like this:
And formByJQuery can be located by javascript "$('#contactus').get(0)"
Or in extreme cases where the standard locators do not suffice and you have to resort to executing a custom script on a page to find an element, you could do so with an anonymous JavaScript function in a DocString like this:
And elemByJSFunc can be located by javascript
"""
(function() {
var elem = ..
// dynamic logic to find element
// based on some fancy rules,
// conditions or what have you
return elem;
})();
"""
To test this last one in the REPL, you would have to use the paste mode since the step spans multiple lines.
That’s it! We hope this has been a good small introduction to locators in Gwen for you.
