Use $("css-selector") or browser.element("css-selector") to lazily declare a page element: groovy $("#element-id") groovy $(".label") groovy $("[data-test-id='my-id']") browser/finders-and-filters Read Finders And Filters to learn how to select elements using more advanced techniques. https://www.w3schools.com/cssref/css_selectors.asp Read W3Schools CSS selectors to learn all kind of CSS selection techniques.

When you use $("css-selector") you create an instance of PageElement . PageElement encapsulates actions that can be performed on a web page. It also represents values on a page. It is safe to declare PageElement before element is actually present on a page.WebTau will try to locate element only when you query or action on it: package scenarios.ui import static org.testingisdocumenting.webtau.WebTauGroovyDsl.* def welcomeMessage = $("#welcome") scenario("simple open") { browser.open("/search") welcomeMessage.should == "welcome to super search" }

Consider a simple search page. Enter value, hit enter, see results: package scenarios.ui import static org.testingisdocumenting.webtau.WebTauGroovyDsl.* scenario('search by specific query') { browser.open('/search') $('#search-box').setValue('search this') $('#search-box').sendKeys("\n") $('#results .result').count.shouldBe > 1 } In the example $("#results .result").count represents the number of elements matching the css selector. Let's extract it. package scenarios.ui import static org.testingisdocumenting.webtau.WebTauGroovyDsl.* def searchBox = $("#search-box") def numberOfResults = searchBox.count scenario("search by specific query") { browser.open("/search") searchBox.setValue("search this") searchBox.sendKeys("\n") numberOfResults.shouldBe > 1 }