I can do any of:
React.RefObject<HTMLDivElement>
React.RefObject<HTMLInputElement>
React.RefObject<HTMLSpanElement>
But it doesn't work to do:
React.RefObject<HTMLAElement>
For <a> tags.
It seems they choose not to do a logical naming convention?
Cannot find any documentation which lists the conversion between 'HTML tag' and 'how react arbitrarily decided to call it'.
You can easily get the type of a element as follows (type in your browser console, not in a script):
const t = document.createElement('a');
console.log(t.__proto__);
As you can see a <a> element will be a HTMLAnchorElement. This is built into HTML and is not react/typescript specific. Replace 'a' with any other element to get it's type.
The a in the <a></a> element is stand for Anchor. So if you want to use the anchor element type you can simply use the HTMLAnchorElement.
According to the MDN documentation:
The HTMLAnchorElement interface represents hyperlink elements and provides special properties and methods (beyond those of the regular HTMLElement object interface that they inherit from) for manipulating the layout and presentation of such elements. This interface corresponds to element
You can also see the list of HTML types on the MDN web API's page, in H column.
Related
https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html
As per this documentation, we do not need to have a data- as a prefix for a custom HTML attribute in JSX to appear in the actual DOM element without warning.
But when I try and use<div size="hello">my div element</div> it appears as <div>my div element</div> in actual DOM.
When I try <div Size="hello">my div element</div> then it appears correctly but it gives a warning.
What is the right way of adding size as a custom property on the HTML attribute?
example codepen here
Since the "size" attribute is a valid attribute for other tags but does not exist on the <div> element React strips it. In the documentation you referenced, it does state that you can prefix attributes with data-. "Just like before, React lets you pass data- and aria- attributes freely".
For obvious reasons, this is not recommended and should probably only be done if non-react scripts utilize the attribute.
To answer the question, if you have to store data in attributes, the best option is to prefix it with data-.
I'm reading the react JS documentation and came across this:
Specifying Attributes with JSX:
You may use quotes to specify string literals as attributes:
const element = <div tabIndex="0"></div>;
I'm fairly comfortable with javascript but I'm not quite sure what the documentation means by "attributes". I know about object properties but this looks like a simple variable.
What exactly is a react js attribute if it is different from a property?
html elements have both attributes and properties
there are a few different scenarios for how they relate to each other. There doesn't necessarily have to be both an attribute or property for each value set on an element.
1. attributes
attributes can be set in html
<a id="mylink" href=""/>
where href is an attribute
or attributes can be set by using the set attribute method of an element
document.getElementById("mylink").setAttribute("href", "")
and read using
document.getElementById("mylink").getAttribute("href")
2. properties
properties can be set and read by retrieving the element as well
document.getElementById("mylink").href = ""
where href is a property
when they are set the first way, you are setting the attribute, the second sets the property.
Usually the underlying element attribute and property are
automatically synchronized, sometimes they are not.
Sometimes there is no matching attribute or property,
only one or the other exists.
Attributes and properties are part of native html elements, which React provides additional support and abstractions around.
Custom React components (such as <MyComponent prop=""/> or <MyComponent prop={someVar}/>), which you create yourself, accept props using the same syntax. The word props in this context refers purely to React props. React custom component props are just plain javascript values passed into your component. These custom components don't get added to the page. They are used to organize and render actual html elements.
When mounting a native component inside of a custom component (such as <div id=""/> or <div id={someVar}/>), the React library sets the underlying html attribute on the native browser element.
So there are two things to keep in mind here
html element attributes verse html element properties.
custom element props are neither of those, but setting a prop on a JSX
native element such as a div, set's the generated element's
attribute.
Now that's been established, the documentation above is saying: if you want to set an attribute value to a string you can use that specific syntax. That syntax only works for setting attribute values to strings.
You can use either:
<div id="myid"/>
or
<div id={'myid'} />
to set a string attribute value. They're probably just pointing out the syntax differences.
if you do:
<div tabIndex="0"/>
the value of tabIndex is the string 0 not the number zero
verses this:
<div tabIndex={0} />
which will pass the number zero to the tabindex attribute of the underlying html element
To me if we pass any parameter in function component then what we diclare in html is properties.But if you use (className/style/etc...) directecly in html then it will be attributes.
I have created the object of Select in selenium to handle dropdown . Also have included the associated packages. Yet the dropdown is not getting selected. Kindly help!
Select select = new Select(driver.findElement(By.xpath("/html[1]/body[1]/div[1]/div[1]/header[1]/div[3]/div[1]/div[1]/div[6]/ul[1]/li[1]/a[1]")));
select.selectByValue("Blouses");
I am recieving the following error "at org.openqa.selenium.support.ui.Select.(Select.java:48)";
Alongwith a note when i hover over Select -
org.openqa.selenium.support.ui.Select
Note: This element neither has attached source nor attached Javadoc and hence no Javadoc could be found.
As far as I can see your XPath expression ends with a which indicates <a> HTML tag which in its turn stands for a hyperlink
In order to be able to use Select class you need to pass to it's constructor a WebElement instance which will point to a <select> HTML tag.
If there is no <select> elements in your page source code - it means that the dropdown is being generated by means of CSS and JavaScript therefore you just need to click the link with the Blouses text which in its turn can be as simple as:
driver.findElementByLinkText("Blouses").click()
If you still want to use XPath - be aware that you can make it a lot shorter, readable and reliable: limit your search scope to hyperlinks only like //a and utilise text() XPath function to match only "interesting" links, the expression which will click the link with Blouses text would be something like:
driver.findElementByXPath("//a[text()='Blouses']").click();
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 am writing an automation test script using Robot Framework & Selenium2Library for testing our web application( in .txt format) . One of my test cases involves to check the CSS style attribute of an HTML tag.
Is there any specific keyword in Robot Framework to obtain the CSS style attribute of an html element?
Here is my testing scenario:
<div id="check_style" style="width:20px;height:20px;background-color:#ffcc00;"></div>
Now, I have to store the background color of this particular html tag into a variable ${bg_color}. Is there any specific keyword in Robot Framework to do this process?
Can you please suggest an effective way to handle this situation?
I think we can make use of this javascript function for the above mentioned purpose :
document.getElementById("check_style").style["background-color"]
But how to make use of this particular function to store the value of background-color inot a variable ${bg_color} ?
( I have tried to execute ${bg_color} = Execute Javascript document.getElementById("check_style").style["background-color"],
but didn't work ! )
You can use the Selenium2Library Get Element Attribute keyword to get the style attribute:
| | ${style}= | Get element attribute | id=check_style#style
You can then either use a regular expression to find the background color attribute or do some additional parsing. The latter would be easier to do in python than with robot keywords.
For example, if you understand regular expressions, something like the following might work. Of course, you'll probably want to add some bullet-proofing.
| | ${style}= | get element attribute | id=check_style#style
| | ${color}= | evaluate | re.search("background-color: *(.*?);", '''${style}''').group(1) | re
Note: you might not get the same literal value as is in the raw HTML. For example, on my machine ${color} comes back as rgb(255, 204, 0) even though the color in the HTML is #ffcc00.
For whatever reason I had a bunch of trouble getting this to work. I think it's because my CSS was defined in an external file (therefore pulling the style attribute came up empty).
Also note that RF now has changed the definition of Get Element Attribute to take two parameters, not one.
I'd like to pass along a great solution I found after a bunch of searching -- I found this amazing keyword here How to get the css style of text-overflow in robot framework
*** Keywords ***
Get CSS Property Value
[Documentation]
... Get the CSS property value of an Element.
...
... This keyword retrieves the CSS property value of an element. The element
... is retrieved using the locator.
...
... Arguments:
... - locator (string) any Selenium Library supported locator xpath/css/id etc.
... - property_name (string) the name of the css property for which the value is returned.
...
... Returns (string) returns the string value of the given css attribute or fails.
...
[Arguments] ${locator} ${attribute name}
${css}= Get WebElement ${locator}
${prop_val}= Call Method ${css} value_of_css_property ${attribute name}
[Return] ${prop_val}
after which I could simply run
${style}= Get CSS Property Value class:logo background-image
and do a plain text comparison. Sub in any CSS value for background-image and have fun with this!
Get css value using javascript in robot framework. link here
# Get element using Xpath in JavaScript.
${element}= Set Variable document.evaluate("${xpath_locator}", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
# Get css attribute value using getComputedStyle()
${attribute_value}= Execute Javascript return window.getComputedStyle(${element},null).getPropertyValue('${css_attribute}');
Log ${attribute_value}