I copied this example to my page but wanted to make all accordion to be closed to begin with
https://getbootstrap.com/docs/3.3/javascript/#collapse-example-accordion
So I set all the aria-expanded to false. Like in this fiddle
aria-expanded="false"
https://jsfiddle.net/0sjhnzdy/1/
Also the aria-multiselectable="false" seems to be ignored. When I change this nothing happens
Related
Our html codes for checkbox always look something like this
<div id="paymentCheckBoxesMod" class="c-form__checkbox-container u-spacing__margin-bottom--16 u-spacing__margin-top--16">
<input type="checkbox" id="supplementaryAgreement" aria-describedby="paymentsCheckboxLabel">
<label for="supplementaryAgreement">
</label>
<div id="paymentsCheckboxLabel">
Jag godkänner Storytels <span id="purchasetermspopup">Köpvillkor</span> & <span id="privacypolicypopup">Integritetspolicy</span>
</div>
</div>
ive always located the element using the label's for="supplementaryAgreement" because if i use the input's id="supplementaryAgreement"i end up having to wait for the timeout duration before the element is located. Does anyone know why?
so that has worked fine until i have to work for iframes and although ive already switched back to mainframe however i will get the error that there is no match on the DOM tree if i use for="supplementaryAgreement" now. It still work with id="supplementaryAgreement" but having to wait for it to timeout doesn't seem efficient.
I think that the cause of this issue is in the complex markup of your checkbox. It seems that the checkbox is overlapped by the label::after element, so TestCafe cannot correctly find the checkbox. The other issue is that label[for=supplementaryAgreement] has height equal to 0.
Your idea with decreasing the timeout for the selector is a good workaround in this case. It does not work since there is a syntax mistake. Please try the following approach: Selector('#supplementaryAgreement', { timeout: 1000 })
This question already has answers here:
How to read text from hidden element with Selenium WebDriver?
(8 answers)
Closed 3 years ago.
I'm attempting to get a list of elements in a dropdown list on a page wihtout expanding the list first.
I've got a piece of html, where a dropdown list is created like this:
<est-select id="egenkapitalType0" name="egenkapitalType0" value="Velg type egenkapital…" <div class="select">
<input type="text" class="select-trigger id="egenkapitalType0-input" placeholder="Velg type egenkapital…">
<ul role="listbox" id="egenkapitalType0-liste" class="select-liste" aria-hidden="false" ng-transclude="">
<li id="egenkapitalType0-0" role="option" class="select-valg data-verdi="BANKINNSKUDD_BSU" value="BANKINNSKUDD_BSU">Bankinnskudd/BSU</li>
<li id="egenkapitalType0-1" role="option" class="select-valg data-verdi="AKSJER" value="AKSJER">Aksjer</li>
</ul>
(I've removed lots of irrelevant html code, so this sample might lack some closing etc.)
Is this possible? Either the displayed text or the values? Or is the access to the elements dependant on them being visible and accessible on the page?
To get the text using getText() the options need to be visible. You can use getAttribute("innerHTML") or getAttribute("textContent") on hidden elements.
You can access elements and it;s not dependent on visibility.
List<WebElement> elms = driver.findElements(By.xpath("//ul[#role='listbox']//li");
Now you have list of web elements and you can, get text, for example.
List<String> textFromElements = elms.stream().map(el -> el.getText()).collect(Collectors.toList());
I have a drop down built with extJS.
<input id="combo-1786-inputEl" data-ref="inputEl" type="text" size="1" name="Query Category" placeholder="Select query category" role="combobox" aria-hidden="false" aria-disabled="false" aria-readonly="false" aria-invalid="true" aria-required="true" aria-haspopup="true" aria-expanded="false" aria-autocomplete="list" class="x-form-field x-form-required-field x-form-text x-form-text-default x-form-invalid-field x-form-invalid-field-default x-form-empty-field x-form-empty-field-default" autocomplete="off" data-componentid="combo-1786" data-errorqtip="<ul class="x-list-plain"><li>This field is required</li></ul>" aria-describedby="combo-1786-ariaErrorEl">
As we can see the tag used is 'input' and not 'select'.
So when I looked up about how to populate it, most answers were made under the assumption that it was created using a 'select' tag and it did not work.
Also the drop downitems are fetched from DB only when I click on the arrow on the dropdown:
So as a result of this, the drop down items cant be found on the page source.
Can someone one please suggest how to populate such downs using the best practice?
P.S-I do have a workaround, but its not at all good code practice and not at all generic:
driver.findElement(By.xpath("//*[#id='combo-1731-trigger-picker']")).click();//clicking on the arrow key of the drop down.
//Once the drop down item comes, I am trying to replicate pressing the keyboard arrow key,by sending down arrow key to the drop down item(web element)
//This works for me because I know the extact position of my drop down item in the drop down item list.It will stop working if the postion of the drop item changes
//so below loop just presses the down arrow key required number of times.
for(int i=0;i<5;i++){
driver.findElement(By.xpath("//*[#id='combo-1731-inputEl']")).sendKeys(Keys.ARROW_DOWN);
}
driver.findElement(By.xpath("//*[#id='combo-1731-inputEl']")).sendKeys(Keys.ENTER);
If you read the comments mentioned along with the above code, then you can understand how fragile the logic is.
Please help.
You are trying to click/ select the item in the drop down correct?
Do the drop down items have unique id's? If so you should be able to just pass it the specific xpath id.
I personally use Css to find elements, in that case it would be
driver.find_element(By.CSS_SELECTOR,'#combo-1731-trigger-picker').click()
driver.find_element(By.CSS_SELECTOR, '#combo-1731-inputEl > nth:child(x)').click()
where x = the count of your drop down item.
or if they have unique id's then use
driver.find_element(By.CSS_SELECTOR, '#theUniqueIdGoesHere').click()
I wrote a whole weeks worth of tests, using xpath selectors, it was painful day to day running the test and watching it fail. Going back and changing everything to Css selectors has saved me many head aches since I started writing Auto tests.
Edit: you could try the following,
driver.findElement(By.linkText("Your Links Text Here")).click();
This will only work if each links text is unique as well, if not it will select the first one it finds.
If these work for you would you mind accepting my answer?
I have a route that is built which properly appends #fans at the end of the link...
http://localhost:3000/.../community#fans
I also have id set for fans in the below code (third line)
1) Even though the link is properly filled when a button is clicked (the address in the address bar is the address as shown above), it does not actually go to the part of the page with id fans.
2) But if I go to http://localhost:3000/.../community first and then type #fans at the end of the link, that works. If i remove the id, #fans does not work so I think the code below is fine.
Given #2, I don't understand why #1 is an issue especially since the link that works is the same link that gets generated for the button. Is there a reason why it would work when manually entering the id tag but not when generated?
<panelWithTopTitleAndOptionalTopButton
class="panelWithCards our-fans"
id="fans"
:class="{ hasNoCards: !fans || !fans.length }"
:name="fansTitle"
v-if="!!fansTitle">
<transition-group name="list" tag="div">
<memberCard class="card fan"
v-for="fan in fans"
v-if="!!fan"
:card="fan"
#delete-member="onDeleteMemberPosition"
type="fans"
:key="fan.key" />
</transition-group>
<div
v-if="showLoadMoreButton"
class="load-more"
#click="loadMore"
>LOAD MORE</div>
</panelWithTopTitleAndOptionalTopButton>
I have a dynamic dojo form in which I have a dijit.form.Select whose selected value I have tried to set dynamically through various ways. I get the select widget to load and show the data, but it always ignores my every attempt. I am using dojo 1.7.
var bcntryval = <?= $this->billingContact->countryId;?>;
var countryStore;
function onBillingShow() {
if (countryStore) countryStore.close();
countryStore = new dojo.data.ItemFileReadStore({url: 'CartUtilities.php?action=getcountries'});
dijit.byId("bcntry").setStore(countryStore, bcntryval); // does not set value! but does set the store
dijit.byId("bcntry").attr('value', String(bcntryval)); // doesn't set the value either
dijit.byId("bcntry").set('value', bcntryval)); // nor does this!
}
My markup for the bcntry widget is as follows:
<td><input data-dojo-type="dijit.form.Select" style="width: 10em;" data-dojo-props="sortByLabel:false, maxHeight:'-1'" data-dojo-id="bcntry" id="bcntry" name="bcntry" />
I've invested a fair amount of time on learning dojo. When it works its nice, but the docs leave a lot to be desired!
I am also seeing a similar problem with the dijit.form.FilteringSelect. That also ignores setting the value via javaScript.
I've also tried completely programmatic versions of this code. I have come to the conclusion that setting the value just doesn't work when you're selecting from a store.
This DID work, but its not dynamic.
<div name="scntry" data-dojo-type="dijit.form.Select" data-dojo-props="maxHeight:'-1',sortByLabel:false" value="<?= $this->shippingContact->countryId;?>" >
<?php foreach($this->countryList as $c):?>
<span value="<?= $c->id;?>"><?= $c->name;?></span>
<?php endforeach;?>
</div>
The reason most likely is, that youre trying to set the value of the 'searchAttr'. Instead you would want to set value to the 'identifier'.
Answer is here, check the timeout function on bottom shelf: http://jsfiddle.net/TTkQV/4/
The trick is to set the value as you would set option.value (not option.innerHTML).
normalSelect.set("value", "CA");
filteringSelect.set("value", "AK");
Take a look here, I believe this does what you want in the Dojo way:
Setting the value (selected option) of a dijit.form.Select widget
If not, you can always just use the actual dom selection object and use straight Javascript:
How do I programatically set the value of a select box element using javascript?