I need to click on an element with the following unique identifier:
<mat-icon
class="mat-icon notranslate icon-arrow-down-tail mat-icon-no-color"
fontset="icon-arrow-down-tail"
role="img"
aria-hidden="true">
::before
</mat-icon>
I think this is the proper way to select a custom-element in RSelenium:
down <- remDr$findElement(using="xpath", value="//mat-icon[#class='mat-icon.notranslate.icon-arrow-down-tail.mat-icon-no-color']")
The element is located in an iframe. I've switched to the iframe, but I imagine there could still be something more complex going on. I'm trying to narrow down what the source of the problem is.
So, my question is: did I properly select a custom element? If not, how do I do that? If I know I selected it properly, I can figure out where else to debug...
(Website is proprietary/requires a login or I'd share it).
If an element you wish to extract the value is in an Iframe, it needs to be switched focus first and then you can proceed to take the element by ID/Class
for example, I used to click a Button inside an Iframe from a site called "https://forexsb.com/historical-forex-data"
iframe_detect <- remDr$findElements(using = "xpath", value = "//iframe[#id='data-app-frame']")
remDr$switchToFrame(iframe_detect[[1]])
load_data_element <- remDr$findElement(using="xpath", value="//button[#id='btn-load-data']")
load_data_element$clickElement()
In above what you use of defining Class element:
down <- remDr$findElement(using="xpath", value="//mat-icon[#class='mat-icon.notranslate.icon-arrow-down-tail.mat-icon-no-color']")
I guess this is a proper full class identifier, since there is multiple name of class joint with dot operator. But in my experience, if using these can come out didn't work, I use just the first class name before the dot operator
so if I had to rewrite (note: only work if there are no more element have the same class name, or else it may take the whole element which match by the Class):
down <- remDr$findElement(using="xpath", value="//mat-icon[#class='mat-icon']")
Related
I'm want to track in Google Analytics clicks into internal links on my page using events in GTM.
I'm debugging my tag in GTM Debugger and it shows me that, there's a problem with my trigger rule.
The rule is:
Click classes -> Matches CSS selector -> .cb-feature-1 .cb-l .cb-grid-entry
Here's hierarchy:
As you can see, there are three links inside div with class .cb-feature-1 .cb-l .cb-grid-entry but all of them are the same so I just want to track all of them together.
Currently your selector looks like this:
.cb-feature-1 .cb-l .cb-grid-entry
which means it is looking for three nested elements:
<div class="cb-feature-1">
<div class="cb-1">
<div class="cb-grid-entry>
... (rest of code)
However this is not what your markup looks like, you want to target a single element with three classes. For this you have to remove the whitespace between the elements of your selector:
.cb-feature-1.cb-l.cb-grid-entry
This will look for elements that have all three classes at once. Since you want to target links within those elements you need to look for an anchor tag:
.cb-feature-1.cb-l.cb-grid-entry a
Choose "Click Element" instead of "Click Classes".
I have a pdf image inside the anchor tag.I need to get the element and with that I need to click on the pdf link. Tried with element by Id but getting element not visible but it is visible.Kindly help in getting the element through css,struck in this for nearly 2 days.
<div class="az content-block">
<ol>
<li>{{'check.ant.label'|text}}</li>
<li>{{'check.bed.label'|text}}</li>
<li>{{'check.hin.label'|text}}<a id="checkPdfLink" ng-href="{{check.pdf}}" target="_blank"><span class="az icon-pdf"></span></a></li>
</ol>
</div>
Did you try with css Selector? If it is hard to find a unique ID, try right click on the inspect element of the pdf link and click on Copy Unique Selector and try to click on it.
element(by.css('paste your Unique Selector here')).click();
Hope this helps. :)
In a simple case, this is just:
element(by.id("checkPdfLink")).click();
But, since you are getting the "Element not visible" error, there could be several reasons for that. One, is that you may need to actually do something to make the element visible - open up a menu, or a dropdown. The other reason, could be the timing problem. Wait for the link to become clickable before clicking:
var EC = protractor.ExpectedConditions;
var pdfLink = element(by.id("checkPdfLink"));
browser.wait(EC.elementToBeClickable(pdfLink), 5000); // wait up to 5 seconds
pdfLink.click();
I'd like to implement a listbox widget using the current web components specs. Moreover, the resulting listbox should conform to the ARIA standard. Instantiating the listbox widget should be as simple as:
<x-listbox>
<x-option>Option 1</x-option>
<x-option>Option 2</x-option>
</x-listbox>
For purposes of cleanliness and encapsulation, everything else should be rendered in shadow dom. To implement this widget, two custom elements, <x-listbox> and <x-option> are registered. The top-level element of the shadow dom of <x-listbox> is a <div> that carries the role=listbox and the aria-activedescendent attributes for accessibility (I don't want these attributes on the <x-listbox> element because they are implementation details.)
In order for aria-activedescendent to work, one needs ids on the option elements. Putting ids directly on the <x-option> elements won't work out of two reasons: Firstly, it would pollute the id namespace of the document that uses the listbox widget. Secondly and even more importantly, ids do not work across shadow boundaries (which is one purpose of the shadow dom), so the ids of the options have to live in the same shadow dom as the <div> with the aria-activedescendent attribute.
A solution for this would be to surround each <x-option> that is rendered as content inside the shadow dom of <x-listbox> with another <div> (belonging to that shadow dom), on which an id can be put.
My question is: Is this the right way to go and how to implement this using the custom element and shadow dom web apis?
Your probably should better implement this by creating an select element (using JavaScript). This should ensure screen readers recognize this correctly as an input for selecting a value/values from a list.
Add an select element like this below your <x-listbox> element:
<select class="only-screenreader">
<option>Option 1</option>
<option>Option 2</option>
</select>
Then add aria-hidden="true" to your custom <x-listbox> element.
Finally apply CSS to make the screenreader select element invisible.
.only-screenreader {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
That's my approach but maybe there's a better one.
In the markup provided, x-option is in the light DOM, not the shadow DOM, so it can be referred to by id. To avoid polluting the id namespace, I generate a random id, which is set when the component loads but can be replaced. This way I can refer to the element by id whether or not the component user has set an id on it.
Wrapping each option in a div seems unnecessary and likely to cause issues. Also, if the options are in a <slot />, it's simply not possible.
I am trying to extract content from a XHTML document-- in this document, within a div, there are a number of 'b' elements, each followed by a link.
For eg--
<div id="main">
<b> Bold text 1</b>
some link 1
<b> Bold text 2</b>
some link 2
<b> ABRACADABRA</b>
abracadbralink
</div>
Now, I want to extract the link 'abracadabralink'-- the problems are that, I dont know how many and elements are there before this specific link-- in different documents there are a different number of such elements- sometimes there are many links immediately after a single element-- all I do know is that the text for the element that occurs just before the link that I want, is always fixed.
So the only fixed information is that I want the link immediately after the element with known text-- how do I get this link using XQuery?
If I get it right, you are interested in the value of the #href attribute? This can be done with standard XPath syntax:
doc('yourdoc.xml')//*[. = ' abracadbralink']/#href/string()
For more information on XPath, I’d advise you to check out some online tutorials, such as http://www.w3schools.com/xpath/default.asp
I guess the following should work for you:
$yournode/b[. = ' ABRACADABRA']/following-sibling::a/#href/string()
I have a tooltip that has a link to an anchor but it seems like it is not going to the right anchor. Rollover the person and click on the "[+]" inside the tooltip.
To view the sample click here
It's because of this:
<a id="david" ...>
on the links. That's the first match for a #david URL - that will match either an id or a name. The <a name=... anchors lower down the document are being ignored.
You need to rename either the ids or the names, so that there's only one element with an id of david, or one anchor with a name of david.
There are two anchors with the same identifier.
The first using the modern approach:
<a id="laurence" title="Laurence Rabino - Web Multimedia">Laurence Rabino</a>
and the second using the Netscape 4 compatible approach (which, for some reason, is contentless):
<a name="laurence"></a>
The browser scrolls to the first one.
Change the identifiers so they don't conflict.
The problem is that you have all of your id's defined for the div's that contain everyone's picture. For example:
<a id="laurence">Laurence Rabino</a>
You need to move the ID's down to their appropriate locations in the "summary" section, so that when you click on one it links to that person's information. For example:
<p id="laurence">