I am doing end to end UI testing and when I try to select an option for Harmony web UI component (<ext-support_he-select>), playwright is not able to recognize the custome tag and it error out saying not a select option.
And I am not able to record dropdown select option with Headless Recorder as well, could you please let me know if anybody has come across this kind of issue.
HTML Select Code :
{
<ext-support_he-select id="workspace-dropdown" class="basic-dropdown basic-workspace-dropdown below valid" aria-labelledby="workspace-label" role="combobox" current-value="" aria-controls="" aria-disabled="false" aria-expanded="false" aria-haspopup="listbox" tabindex="0" position="below" aria-activedescendant="option-14">
<ext-support_he-option selected="" value="" aria-selected="true" class="selected" role="option" id="option-14" aria-posinset="1" aria-setsize="9"> Select a Workspace </ext-support_he-option>
<ext-support_he-option value="accountPlans" aria-selected="false" role="option" id="option-15" aria-posinset="2" aria-setsize="9"> Account Plans </ext-support_he-option>
<ext-support_he-option value="accounts" aria-selected="false" role="option" id="option-16" aria-posinset="3" aria-setsize="9"> Accounts </ext-support_he-option>
<ext-support_he-option value="contacts" aria-selected="false" role="option" id="option-17" aria-posinset="4" aria-setsize="9"> Contacts </ext-support_he-option>
<ext-support_he-option value="engagements" aria-selected="false" role="option" id="option-18" aria-posinset="5" aria-setsize="9"> Engagements </ext-support_he-option>
<ext-support_he-option value="leads" aria-selected="false" role="option" id="option-19" aria-posinset="6" aria-setsize="9"> Leads </ext-support_he-option>
<ext-support_he-option value="opportunities" aria-selected="false" role="option" id="option-20" aria-posinset="7" aria-setsize="9"> Opportunities </ext-support_he-option>
<ext-support_he-option value="partners" aria-selected="false" role="option" id="option-21" aria-posinset="8" aria-setsize="9"> Partners </ext-support_he-option>
<ext-support_he-option value="userProvisioning" aria-selected="false" role="option" id="option-22" aria-posinset="9" aria-setsize="9"> User Provisioning </ext-support_he-option>
<!--fast-eovm3s:5-->
</ext-support_he-select> }
Please refer UI screenshot given below.
You can use first click on the dropdown and the click on the required dropdown item.
await page.locator(#workspace-dropdown).Click();
await page.waitForSelector("xpath=//ext-support_he-option[#value='accounts'");
await page.locator("xpath=//ext-support_he-option[#value='accounts'").Click();
Yes, I got that hint from my friend as well, and this works instead of using the "select option" call. Just I putting my code as a reference if someone wants to use this.
var workSpaceDropdown = page.locator('#workspace-dropdown');
await workSpaceDropdown.click();
page.keyboard.press('ArrowDown');
please refer below for more details.
https://playwright.dev/docs/api/class-keyboard#keyboard-down
Related
Trying to use the bn.com to run a simple test to search for a book and sort by Lowest Price first. The HTML of that dropdown section after searching the bookstore for "left hand of darkness" is as follows:
<div class="sort-by">
<select name="sorter" id="sortProducts1" class="hidden selectBox" title="Sort by:" data-selectbox="" style="display: none;">
<option value="/s/left+hand+of+darkness" selected="selected">Top Matches</option>
<option value="/s/left+hand+of+darkness?Ns=P_Sales_Rank%7C0">Best Sellers</option>
<option value="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C1">Newest to Oldest</option>
<option value="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C0">Oldest to Newest</option>
<option value="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C0">Price - Low to High</option>
<option value="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C1">Price - High to Low</option>
<option value="/s/left+hand+of+darkness?Ns=P_Display_Name%7C0">Title - A to Z</option>
<option value="/s/left+hand+of+darkness?Ns=P_Display_Name%7C1">Title - Z to A</option>
</select>
<div class="selectBox-container">
<a class="selectBox hidden selectBox-dropdown selectBox--filled" title="Sort by:" tabindex="0" style="display: inline-block;" aria-labelledby="sortProducts1-button-label" id="sortProducts1-replacement" aria-expanded="false" aria-owns="selectBox-2">
<span class="selectBox-title">Sort by:</span>
<span class="selectBox-label" id="sortProducts1-button-label">Top Matches</span>
<span class="selectBox-arrow"></span>
</a>
<ul class="selectBox-dropdown-menu selectBox-options hidden-selectBox-dropdown-menu" style="display: none;" id="selectBox-2" role="listbox">
<li id="sortProducts1-option-0" role="option">
<a rel="/s/left+hand+of+darkness">Top Matches</a>
</li>
<li id="sortProducts1-option-1" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Sales_Rank%7C0">Best Sellers</a>
</li>
<li id="sortProducts1-option-2" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C1">Newest to Oldest</a>
</li>
<li id="sortProducts1-option-3" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C0">Oldest to Newest</a>
</li>
<li id="sortProducts1-option-4" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C0">Price - Low to High</a>
</li>
<li id="sortProducts1-option-5" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C1">Price - High to Low</a>
</li>
<li id="sortProducts1-option-6" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Display_Name%7C0">Title - A to Z</a>
</li>
<li id="sortProducts1-option-7" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Display_Name%7C1">Title - Z to A</a>
</li></ul></div>
</div>
I can't seem to get the option in the dropdown selected.
My most recent attempt looks like this:
describe('Visits book store and finds cheapest book', () => {
it('Visits book store and finds cheapest book', () => {
cy.visit('https://www.barnesandnoble.com/');
cy.get(`[id="searchBarBN"]`).type('Left Hand of Darkness');
cy.get('.icon-search-2').click();
cy.get(`[id="sortProducts1-replacement"]`).find(`[id="sortProducts1-option-4"]`)
.click({ force: true });
There are no failures, but the sort option nevertheless remains unselected since the DOM does not have the book results sorted by price ascending.
Looking for some help in making sure I'm correctly selecting the dropdown choice that's needed.
You most likely need to wait for the results to be returned after the click (cy.get('.icon-search-2').click()) before trying to select any elements or make assertions. Cypress is trying to select elements that have not been rendered.
This can be done using cy.wait against the route for the results.
There are several examples in the Cypress Real World App, a payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows of waiting on network requests that demonstrate this concept.
I tried the following code below to click drop down:
driver.FindElement(By.XPath("//div[#id='content']/div/app-appdashboard/div[3]/div/div/div/div/button")).Click();
And I tried the following code to click on one of options from drop down:
driver.FindElement(By.XPath("//div[#id='cdk-overlay-0']/div/div/button[16]/span")).Click();
<button _ngcontent-jco-c9="" aria-haspopup="true" class="btn btn-state dropdown-toggle" mat-button="" ng-reflect-menu="[object Object]">
<span _ngcontent-jco-c9="" class="ng-star-inserted"> Update Overall App Status </span></button>
<button _ngcontent-jco-c9="" aria-label="option row button." class="menu-button mat-menu-item ng-star-inserted" mat-menu-item="" role="button" tabindex="0" ng-reflect-role="button" name="PM Supervisor Approved" title="PM Supervisor Approved" aria-disabled="false"><span _ngcontent-jco-c9="">PM Supervisor Approved</span><div class="mat-menu-ripple mat-ripple" matripple="" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div></button>
Try this:
WebDriverWait wait=new WebDriverWait(driver, 20);
driver.FindElement(By.className("ng-star-inserted")).click();
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath(".//button[#name='PM Supervisor Approved']/span")));
driver.FindElement(By.xpath(".//button[#name='PM Supervisor Approved']/span")).click();
I am trying to implement routing in my project. I have implemented navigation tabs. I cant seem to solve this below problem. Whenever i click on other tabs, home tab is always active.
I have tried to add routerLinkActiveOption, which everywhere is the working solution. But its not just for me.
<ul class="nav nav-tabs">
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link active" [routerLink]="['/']" data-toggle="tab" role="tab">Home</a></li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link " [routerLink]="['/users']" data-toggle="tab" role="tab">Users</a></li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link " [routerLink]="['/servers']" data-toggle="tab" role="tab">Servers</a></li>
</ul>
Routes:
const routes: Routes = [
{path : '' , component:HomeComponent},
{path : 'users', component:UsersComponent},
{path : 'servers', component:ServersComponent}
];
You need to use routerLinkActiveOptions
<li><a routerLinkActive="active" routerLink="product" [routerLinkActiveOptions]="{exact:true}">Shop</a></li>
Your first route should look like this
{path : '' , component:HomeComponent, pathMatch: 'full'}
Take a look at this Link for explanation what pathMatch: 'full' exacly does.
webdriver finding xpath its too dificult for me. i used fire path most of fire path given xpath not working and its too lengthy. some one give me idea about xpath will work all conditions and i know relative xpath
some times this posibilities also not working like {//ul[#class='review-nav']}. some one help me for find xpath that xpath will work all conditions
<ul class="review-nav">
<li id="pend" class="pend tabclass">
<a onclick="OnTabSelect(1,'pend',0)" href="#">Pending (197)</a>
<span class="glyphicon glyphicon-filter filterclass" style="color:#185daa;top:4px;display:none"/>
</li>
<li id="flag" class="flag tabclass active">
<a onclick="OnTabSelect(4,'flag',1)" href="#">Flagged (96)</a>
<span class="glyphicon glyphicon-filter filterclass" style="color:#185daa;top:4px;display:none"/>
</li>
<li id="esca" class="esca tabclass">
<a onclick="OnTabSelect(5,'esca',2)" href="#">Escalated (88)</a>
<span class="glyphicon glyphicon-filter filterclass" style="color:#185daa;top:4px;display:none"/>
</li>
<li id="closed" class="closed tabclass">
<a onclick="OnTabSelect(3,'closed',3)" href="#">Closed (99)</a>
<span class="glyphicon glyphicon-filter filterclass" style="color:#185daa;top:4px;display:none"/>
</li>
<li id="all" class="all tabclass">
<a onclick="OnTabSelect(0,'all',3)" href="#">All (1,355)</a>
<span class="glyphicon glyphicon-filter filterclass" style="color:#185daa;top:4px;display:none"/>
</li>
</ul>
I try this Xpath to read above list its not working
xpath = //ul[#class='review-nav']
Sorry for that, I am little bit not clear for what you need xpath..
If you are trying to get all link ('a') to collect into List
//ul[#class='review-nav']/li/a
If you are trying to get all 'span' element to collect into List
//ul[#class='review-nav']/li/span
If you want to get specific element in specific li, you can try with id of 'li', for example if you like to find xpath of 'a' in first li
//li[#id='pend']/a
Thank You
Try with CSS:
.tabclass
You should get the 'li' elements with this.
I'm currently in the process of developing a website that has to match AA accessibility standards. I have a custom-built dropdown being a part of a form and can't figure out how to label it for screen-readers. Sadly I can't use a native select dropdown (despite being accessible, the website is rather design heavy and it was the best way to apply custom styling to this), so can't use a regular label tag. So far I've used the below, but I believe that it's not the correct approach.
<form>
(...) other inputs
<ul class="dropdown" role="listbox" aria-labelledby="location" aria-multiselectable="false" aria-expanded="false" tabindex="0">
<li class="first" aria-labelledby="location">
<span>Location</span>
</li>
<li tabindex="-1" role="option" aria-selected="false">Location1</li>
<li tabindex="-1" role="option" aria-selected="false">Location2</li>
<li tabindex="-1" role="option" aria-selected="false">Location3</li>
</ul>
</form>
Just to describe the behaviour - this is a regular dropdown with only li.first visible initially (on click/enter all the fields become visible and the value can be chosen). Once an option is picked, aria-selected is set to true and the value is replacing the Location text in span.
Could anyone suggest a better solution for this? My biggest concern at the moment is possibly the incorrect usage of aria-labelledby, but I don't know what should be the right option.
Thanks,
E.
Edit: JS + jQuery
$('.dropdown').on('click', function () {
$(this).toggleClass('opened');
if ($(this).attr('aria-expanded') === 'false') {
$(this).attr('aria-expanded', 'true');
} else {
$(this).attr('aria-expanded', 'false');
}
})
$('.dropdown li').on('click', function () {
if (!$(this).hasClass('first')) {
var text_drop = $(this).html();
$(this).parent().find('span').html(text_drop);
$(this).parent().children().not('.first').attr('aria-selected', 'false')
$(this).attr('aria-selected', true);
$('.dropdown').animate({scrollTop: 0}, 200);
}
});
The aria-labelledby should refer to the id of an existing element. You have a problem with your label being inside the object itself. Something like the following would make more sense.
<form>
(...) other inputs
<div id="location" aria-expanded="false" aria-owns="listchoices">Location</div>
<ul class="dropdown" role="listbox" aria-labelledby="location"
aria-multiselectable="false" tabindex="0">
<li tabindex="-1" role="option" aria-selected="false">Location1</li>
<li tabindex="-1" role="option" aria-selected="false">Location2</li>
<li tabindex="-1" role="option" aria-selected="false">Location3</li>
</ul>
</form>
Without the javascript part, I can't give you more help