I have tried this but it returns error (Uncaught TypeError: Cannot set property 'opacity' of undefined)
console.dir(document.getElementsByTagName("*").style.opacity="0.5");
document.getElementsByTagName("*") returns an array of elements. You can't access the style of all those elements at the same time using elements.style.
You can set the style for the first element (which should be the root element) like this:
document.getElementsByTagName("*")[0].style.opacity = 0.5
This will affect the root element and all its child elements.
Related
I'm runing a nightwatch test on Loadero and its failing.
I'm trying to test if an element is available, and if it is, to click on it.
I believe that below, I'm saying only try click the button if it exists.
client.elements("css selector", "div[aria-describedby='dialogWindowTooSmall button.ui-button']", function (result) {
if (result.value.length) {
client.click('div[aria-describedby="dialogWindowTooSmall"] button.ui-button)');
}
})
But I'm getting an error.
The first line seems to execute fine. I get two ELEMENT ids back
[ { ELEMENT: '0.7754195696252344-2' },
{ ELEMENT: '0.7754195696252344-3' } ] }
but the click function fails:
Error while running .clickElement() protocol action: An element command could not be completed because the element is not visible on the page. – element not interactable
Surely if the element is found, its clickable?
(i have tried to paste more of the log here but it loses all formatting and is impossible to read)
Thanks!
No, if the element is present on the page, it does not mean that the element is also interactable (or clickable). For an element to be interactable, it also needs to be "visible" on the page and not just "present" on the page. It can happen if the element is hidden or outside the viewport of the page.
When you try to perform a 'click' operation on an element, Selenium first tries to locate the element and if the element is not visible in the view, it tries to scroll to the element to bring it into the view and then click on the center-point of the element.
Now, if Selenium is unable to bring the element into the view, it throws element not interactable error. If it is able to bring the element into the view but the center-point of the element is covered by some other element, it throws element click intercepted error. Otherwise, it successfully performs the 'click' operation on the element.
For reference: https://w3c.github.io/webdriver/#element-click
I am using angular 5 where in a component I have one method
onFullScreen : function (event){ console.log(event[0]) }
Here, when I do console.log(event[0]), this will return this
This returns a HTMLDivElement, now I want to get the height property in my onFullScreen() method. How to get it?
The best way to get the height of an element (and lots of other layout-related properties) is to use getBoundingClientRect (https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect).
So you can do this:
const height = event[0].getBoundingClientRect().height;
You can try this:
var height = document.getElementById('element').style.height;
Since the height is defined in inline styles for this element, this would work.
Warning: this does not work if height is not explicitly defined in css but calculated based on content or outer box.
I am able to find elements by class using Watir, but I can't figure out how to do additional processing with them after selection - the elements found are nil (see below).
I would love to see the html text of each element found.
You have instances of Watir::HTMLElement which at time of definition only stores the parent and selector. The #element variable which represents the object in the DOM located by Selenium through a browser driver will only be populated when you take an action on the element.
To see the text of each element, just put puts event.text inside your loop.
I am attempting to use an xpath locator within a context for a Codeception test using the Selenium driver with Firefox. Specifically, I am trying to click the second link in the message body of an email, viewed with roundcube.
The body of the email is in the div with xpath //div[#class="rcmBody"]
I can get the link with this path: (//div[#class="rcmBody"]//a)[2]
But for some reason when I try //a[2] within the context of the body div, it returns all a elements within the iframe.
An example from codeception: (after selecting the correct iframe)
$I->click('//a[2]', '//div[#class="rcmBody"]')
This causes the web driver to click the second link in the iframe which comes before the body div begins.
I can also test this from directly in chrome:
$x('//a', $x('//div[#class="rcmBody"]')[0])
This returns a list of all a elements within the iframe, not within the context.
How can I get the context part to work?
Add a dot to the beginning of XPath to make it context-specific:
$I->click('(.//a)[2]', '//div[#class="rcmBody"]')
HERE^
Note that the parenthesis here are also important to get the desired a descendant of the parent.
I have two polymer elements like
<moviegrep-element></moviegrep-element>
<custom-card-element></custom-card-element>
In moviegrep-element I got an array of objects called results. I want to use the results in my custom-card-element. How does it work?
Use Polymers data-binding:
<moviegrep-element results="{{sharedResults}}"></moviegrep-element>
<custom-card-element results="{{sharedResults}}"></custom-card-element>
This assumes that both of your elements publish the results property as an attribute. Changes to the results property in one element are then propagated to the results property in the other element.
This also assumes that your elements are itself inside a Polymer element. Otherwise you need an auto-binding template element