how to find an element with custom class name in WebdriverIO
how to find element with this particular class name ng-repeat="document in documentsUploaded"
Short answer is: use CSS or xpath selectors https://webdriver.io/docs/selectors.html
ng-repeat is not a class, it's an element's attribute.
See also https://www.w3schools.com/cssref/css_selectors.asp and https://devhints.io/xpath
The answer for your question is following CSS selector:
tr[ng-repeat='document in documentsUploaded']
Related
I need to edit the css of some images in a class, but I'm doing it in a function, I've already done something similar but it directly edits a class, I need to know if I can do the same but edit only the img element of it.
Someone has had a similar issue here. I believe the solution is to use nested classes:
<div class="myParentClass">
<img class="myNestedClass" src="./myPicture"/>
</div>
Then just edit the class as you would normally. If you want to add css to it, you can just use:
.myParentClass .myNestedClass {
property: value;
}
CSS locator :".header-GlobalAccountFlyout-link.display-block" returns 3 elements in a class. I need to get to the last one -"Create an Account". Does anybody know how to finish writing CSS to get there? Thank You.
Using Attribute Selectors we don't necessarily need the Class selectors here at all.
You have a few options:
If data-uid never changes:
[data-uid="eRDhfBAS"]
If the href link never changes:
[href="/account/signup"]
If the alt text never changes:
[alt="Create an Account"]
If the data-tl-id never changes:
[data-tl-id="header-GlobalAccountFlyout-flyout-link-1"]
If there may be other elements with those same attributes and values, simply include your Class selectors as well. For example:
.header-GlobalAccountFlyout-link.display-block[href="/account/signup"]
Or you could combine some of the above attribute selectors...
[href="/account/signup"][alt="Create an Account"]
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
Good day. I have a question:
is there any way to restrict to angular adding additional classes for element for animation?
i.e.: when element has some transition in CSS, and i try to add another class with ng-class, it also adds: class-add, class-add-active.
I don't want angular to add this classes.
Yes there's a way to do it, you need to add a filter on class names you want to animate via a regex
angular.module('myApp', ['ngAnimate']).config(['$animateProvider', function($animateProvider){
$animateProvider.classNameFilter(/myClass/);
}]);
<div class="myClass"> ... </div>
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'));