Hi there,
I am new to testcafe and I am trying to set up automated testing for a web app that uses USWDS (US web design system) style guide.
In our application we uses a accordion with radio buttons, it was clasped at first when you first load the page, then I click on the button to expanded the accordion to show all the radio button. After that, I would like to click on those radio buttons. However, its failing the test reporting the button is not visible when it is visible on the page.
The following are some snapshots of the code
Html:
<div class="usa-grid">
<div class="usa-width-one-fourth">
<ul class="usa-accordion-bordered">
<legend class="usa-sr-only">Type options</legend>
<li>
<button class="usa-accordion-button" aria-expanded="false" aria-controls="type" id="type-button">
Type
<img id="foodtype-help" src="/assets/icon-help-circle.png" alt="food-type-help-icon" class="help-icon" (click)="$event.stopPropagation(); infoMessageService.showFoodTypeInfoMessage()">
</button>
<div id="type" class="usa-accordion-content">
<fieldset class="usa-fieldset-inputs usa-sans">
<ul class="usa-unstyled-list">
<li>
<input id="foodtype-all" type="radio" name="type-all" value="" [(ngModel)]="searchCriteria.foodType" (ngModelChange)="search()">
<label for="foodtype-all">All</label>
</li>
<li>
<input id="foodtype-survey" type="radio" name="type-survey" value="Survey" [(ngModel)]="searchCriteria.foodType" (ngModelChange)="search()">
<label for="foodtype-survey">Survey</label>
</li>
<li>
<input id="foodtype-branded" type="radio" name="type-branded" value="Branded" [(ngModel)]="searchCriteria.foodType" (ngModelChange)="search()">
<label for="foodtype-branded">Branded</label>
</li>
<li>
<input id="foodtype-reference" type="radio" name="type-Reference" value="Reference" [(ngModel)]="searchCriteria.foodType" (ngModelChange)="search()" >
<label for="foodtype-reference">Reference or Prototype</label>
</li>
<!--<li>-->
<!--<input id="foodtype-prototype" type="radio" name="type-prototype" value="Prototype" [(ngModel)]="searchCriteria.foodType" (ngModelChange)="search()" >-->
<!--<label for="foodtype-prototype">Prototype</label>-->
<!--</li>-->
</ul>
</fieldset>
</div>
</li>
</ul>
</div>
Scripts:
"../node_modules/uswds/dist/js/uswds.js"
Test:
test('search kale with four type of search', async t => {
await t
.typeText(_headerPage.quickSearchField, 'kale fresh')
//search for survey food on default
.click(_headerPage.quickSearchButton)
.expect(_foodSearchPage.searchResultRows.count).eql(6)
//expand the Type panel
.click(_foodSearchPage.foodTypeButton);
//search for all food
if (await _foodSearchPage.foodTypeAllButton.visible && await _foodSearchPage.foodTypeAllButton.exists) {
//the selector for foodTypeAllButton is Selector('#foodtype-all');
await t
.click(_foodSearchPage.foodTypeAllButton)
.expect(_foodSearchPage.searchResultRows.count).eql(100);
}
});
Test report:
Running tests in:
- Firefox 60.0.0 / Mac OS X 10.12.0
Food Search
:heavy_multiplication_x: search kale with four type of search
1) The element that matches the specified selector is not visible.
Browser: Firefox 60.0.0 / Mac OS X 10.12.0
19 | .click(_foodSearchPage.foodTypeButton);
20 |
21 | //search for all food
22 | if (await _foodSearchPage.foodTypeAllButton.visible && await _foodSearchPage.foodTypeAllButton.exists) {
23 | await t
> 24 | .click(_foodSearchPage.foodTypeAllButton)
25 | .expect(_foodSearchPage.searchResultRows.count).eql(100);
26 | }
27 |
As you can see, it is complaining the element is not visible, even I just checked it to be visible and existing right before clicking on it.
Any help is appreciated 
Thanks,
JImmy
