I have problem in selecting links from a web document which contains word "FooBar".
I tried A:contains('FooBar') on selector test and it worked however it doesn't work from my jsoup application which is based on CSS3 selectors.
selector test: http://www.w3schools.com/jquery/trysel.asp?filename=trysel_basic&jqsel=p.intro,%23choose
seems like CSS3 doesn't support :contains http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#content-selectors
any alternative to :contains in CSS3?
I believe that :contains was removed from the CSS3 spec, and that no browsers currently support it.
If you want to select an anchor element with an href containing "FooBar", you can use something like this:
a[href*="FooBar"] {
// your styles here
}
This selector works on any attribute and is supported in all major browsers, including IE7+.
See DEMO.
jQuery (and more specifically Sizzle) has extended the CSS selectors with its own custom selectors. :contains is a custom selector.
Related
This is for Selenium webdriver xPath. Please refer to screen capture. I am writing following XPath for Collection #1 button, but this is just temporary text which has been given to button. but this text will be change once BLL is implemented. So how do I define XPath? In screen capture UI and HTML is there.
For now I gave following xpath in my script.
//*[#class='infix' and text()='Collection #1']
This is xPath
/html/body/esx-root/div/esx-prospect-landing/esx-community-search-hero/div[2]/div[2]/div/button[1]
This is CSS
html body esx-root div.container esx-prospect-landing.ng-star-inserted esx-community-search-hero div.content-wrapper div.bottom-wrapper div.hero-actions button span.infix
This is CSS Selector
.hero-actions > button:nth-child(1) > span:nth-child(2)
How do I define short way XPath in my script.
You should go for some tutorial to write effective and customized xpath or css path
There are lots of tutorials website you can refer as per your interest.
https://www.guru99.com/xpath-selenium.html
https://www.softwaretestinghelp.com/css-selector-selenium-locator-selenium-tutorial-6/
https://selenium-by-arun.blogspot.com/2012/12/25-locate-ui-elements-by-xpath.html
Always prefer relative xpath instead of absolute xpath and top of it, prefer CSS selector until you don't have final choice to using xpath (locate element based on text)
Now for your case you can refer below xpath to locate the element based on text
//div/button[contains(.,'Collection #1')]
OR
//button/span[class='infix'][contains(.,'Collection #1')]
And below CSS selector
.hero-actions>button span.infix
Additionally, you can take the other surrounding elements to make it unique.
I've learned the other day that Selenium throws exception about the selector if it is CSS selector and contains :visible. This is a drawback for me. How can I get around this?
In Katalon Studio, you can execute JavaScript (jQuery, in this case).
For example, the following will paint yellow all the <a> elements that contain :visible:
WebUI.executeJavaScript('return $("a:visible").css("backgroundColor", "yellow")', [])
I've been looking over the Angular Schema Form documentation to be able to apply attributes to the elements generated at: https://github.com/Textalk/angular-schema-form/blob/development/docs/index.md
Have been looking up and down and have found nothing. I see through defining the schema that you can define custom HTML classes:
htmlClass: "street foobar", // CSS Class(es) to be added to the container div
fieldHtmlClass: "street" // CSS Class(es) to be added to field input (or similar)
labelHtmlClass: "street" // CSS Class(es) to be added to the label of the field (or similar)
But, haven't been able to find where I can apply attributes like the data attribute or an attribute specific to the element itself. Any resources in regards to this type of basic functionality you'd expect from form generation?
Any ideas?
Thanks!
I do not think this is possible to do purely through json schema definitions, you would have to extend Schema Form and provide your own HTML template with your custom attributes. I've had this problem myself and have had to do the very same.
I'm sure you've seen this but here's the docs on extending:
https://github.com/json-schema-form/angular-schema-form/blob/master/docs/extending.md
Is it possible to get an element by its name like you can with jQuery?
I'm trying to do the equivalent of the jQuery selector like in jQuery
$('h1')
how is this done with protractor?
I tried
element('h1')
but it doesn't work
There's a couple ways to do this - you can either get it by tagName or by css selector. So any of the following work:
element(by.css('h1')); // works with any css selector
$('h1'); // works with any css selector
element(by.tagName('h1'));
The answer was finally found on github they have a test file that shows all the selectors
element(by.css('h1'));
element(by.css('.my-class'));
I'm trying to remove jquery from my Angular.js app in order to make it lighter, and put Angular's jqLite instead. But the app makes heavy use of find('#id') and find ('.classname'), which are not supported by jqLite, only 'tag names' (as per documentation)
wondered what do u feel would be the best approach to change it. One approach I thought about is to create custom HTML tags. for example:
change
<span class="btn btn-large" id="add-to-bag">Add to bag</span>
to
<a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b>
and
$element.find('#add-to-bag')
to
$element.find('a2b')
Any thoughts? other ideas?
thanks
Lior
Essentially, and as-noted by #kevin-b:
// find('#id')
angular.element(document.querySelector('#id'))
//find('.classname'), assumes you already have the starting elem to search from
angular.element(elem.querySelector('.classname'))
Note: If you're looking to do this from your controllers you may want to have a look at the "Using Controllers Correctly" section in the developers guide and refactor your presentation logic into appropriate directives (such as <a2b ...>).
angualr uses the lighter version of jquery called as jqlite which means it doesnt have all the features of jQuery. here is a reference in angularjs docs about what you can use from jquery.
Angular Element docs
In your case you need to find a div with ID or class name.
for class name you can use
var elems =$element.find('div') //returns all the div's in the $elements
angular.forEach(elems,function(v,k)){
if(angular.element(v).hasClass('class-name')){
console.log(angular.element(v));
}}
or you can use much simpler way by query selector
angular.element(document.querySelector('#id'))
angular.element(elem.querySelector('.classname'))
it is not as flexible as jQuery but what
If elem.find() is not working for you, check that you are including JQuery script before angular script....