Tom Mc Tom Mc - 3 months ago 47
C# Question

How to click an Expand button to open a section using Selenium Webdriver C#

I am having trouble clicking on an Expand button which opens a section of the page listing taxonomy checkboxes.

It seems webdriver thinks it's perfoming the action to click on Expand button, but the section stays collapsed.

Below is the part of the HTML

Code

metadata-editor name="resourceModelTaxonomyTypeIds" label-text="Type" matadata-fieldname="Type" resource-id="id" selected-ids="resourceModel.TaxonomyTypeIds" required class="ng-isolate-scope"
<div class="form-group" ng-class="{'has-error': (required && form.$submitted && !isValid)}"
::before
<div class="col-md-9">
<!-- ngRepeat: node in loadSelectedNodes() -->
<br ng-show="loadSelectedNodes().length > 0" class="ng-hide"
<button type="button" class="btn btn-sm btn-info btn-expand-taxonomy ng-pristine ng-binding ng-invalid ng-invalid-valid ng-touched" name="resourceModelTaxonomyTypeIds" ng-model="selectedIds" ng-click="toggleView(isCollapsed)"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Expand</button>


Here are some of my workings which haven't worked:

Attempt 1: I tried the simple .Click() action

driver.FindElement(By.Name("resourceModelTaxonomyTypeIds")).Click();


Result: Webdriver passes the step, however nothing has happened on screen, the Expand button is still collapsed and the option are still hidden.

Attempt 2: I tried the MoveToElement action

Actions clickExpand = new Actions(driver);
clickExpand.MoveToElement(driver.FindElement(By.Name("resourceModelTaxonomyTypeIds"))).Click().Perform();


Result: Same as before, webdriver thinks everything is ok, but in reality the Expand button has still not expanded the section.

Attempt 3: Installed Selenium IDE, done a Record and Playback to see what it codes it as (by converting to C#)
Selenium IDE records it with the
.Click()
action as I tried in attempt 1 above.

I'm a bit stuck on why this won't work for this particular button. Has anyone encountered this or dealt with these type of expand buttons?

Note: Manually tested the expand button by clicking to prove button work, just webdriver doesn't seem to be doing it.

Answer

Turns out for this type of expand button, if you actually go after the glyphion-chevron and click that, then the action performs...

driver.FindElement(
            By.CssSelector(
                ".glyphicon.glyphicon-chevron-right")).Click();

When the button is collapsed the chevron is "right", when expanded the chevron is "down", so in theory if you have mulitple expands, you can repeat the same code which will expand all of them... or be smarter and associate with the parent, but both work.

To click to collapse the area of screen you need....

driver.FindElement(
                By.CssSelector(
                    ".glyphicon.glyphicon-chevron-down")).Click();
Comments