While doing acceptance tests, we often run into scenarios where we need to click on elements which can’t be found or clicked on using simple expressions like – I follow “Login”. Let me give an example, on a page there is an anchor tag with specific id. The anchor tag has no text but an image inside it. In such cases, we are left no other choices than querying the dom. XPath could be a decent way to find the anchor tag here. Let’s assume that the anchor tag has the id – 14. So the xpath query should be – “//a[@id=’14’]”.
PS: We can use Firebug to test out XPath queries. There is a built in function – $x – on a firebug console, just pass xpath queries as string to this function and it will throw matching elements.
Here’s a step definition I wrote inside my FeaturedContext class. This method takes in a xpath query and clicks on the element:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/** * Click on the element with the provided xpath query * * @When /^I click on the element with xpath "([^"]*)"$/ */ public function iClickOnTheElementWithXPath($xpath) { $session = $this->getSession(); // get the mink session $element = $session->getPage()->find( 'xpath', $session->getSelectorsHandler()->selectorToXpath('xpath', $xpath) ); // runs the actual query and returns the element // errors must not pass silently if (null === $element) { throw new \InvalidArgumentException(sprintf('Could not evaluate XPath: "%s"', $xpath)); } // ok, let's click on it $element->click(); } |
And how do we use it inside a “feature” file?
1 |
Given I click on the element with xpath "//a[@id='14']" |
UPDATE:
Using a jQuery like CSS Selector is pretty easy. Looks like Mink also allows CSS Selectors by default. Here’s the same method with CSS Selector:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/** * Click on the element with the provided CSS Selector * * @When /^I click on the element with css selector "([^"]*)"$/ */ public function iClickOnTheElementWithCSSSelector($cssSelector) { $session = $this->getSession(); $element = $session->getPage()->find( 'xpath', $session->getSelectorsHandler()->selectorToXpath('css', $cssSelector) // just changed xpath to css ); if (null === $element) { throw new \InvalidArgumentException(sprintf('Could not evaluate CSS Selector: "%s"', $cssSelector)); } $element->click(); } |
And we use it in the feature file like:
1 |
Given I click on the element with css selector "a#14" |
The test should fail in case a matching element was not found. Let me know if you run into any issues or find even better or elegant ways to do this.