As a part of Automation testing, I want to hover over this node. which has a complex source code. You can find the code here
. Can someone please say the code which can hover using the syntax .hover(Selector(?)) using TestCafe.
Thanks in advance!
For now, you can select nodes in svg only if it's inserted into the HTML document via the <svg> tag. TestCafe does not support selecting elements in an svg that is imported from a separate document via the <object> tag.
There are multiple ways to select an element in TestCafe using Selector. To do that, you need to identify the element's distinguishing features. These might include the element's id, class, attributes, position in the DOM tree or relation to other elements. Then you need to create a Selector based on one of these features.
For more information on TestCafe selectors see our documentation.
Related
I am on the https://jqueryui.com/selectmenu/ website where I am trying to build xpath for the first selector Select a speed. I build the xpath to iframe but how to reach the first selector Select a speed?
//body/div[#id='container']/div[#id='content-wrapper']/div[1]/div[1]/iframe[1]
Since your elements are inside the iframe in order to access these elements you should first switch to the iframe as described here
Also, to locate the iframe you can simply use one of the following xpaths//iframe or //iframe[#class='demo-frame'] or select by class demo-frame etc.
After switching into the ifame the xpath to select a speed is //span[#id='speed-button']
I want to get all elements in my XML (NativeScript with Vue) that have the same class. Is this possible?
As an extension, is it possible to add custom attributes to existing controls like the TextField (similar to data-* attributes in HTML), and if so, is there a selector that I could use to get all elements having the same data- attribute? (For example, the HTML/CSS equivalent would be something like input[data-customerid="12"])
If you are looking for something like document.querySelector(...), there is a paid plugin - nativescript-dom. FYI, you might find the free / unmaintained version on Github, which is not guaranteed to work with {N} v6.x or later.
If you are looking for Attribute CSS selectors, that's supported out of the box. And Yes, you can add custom attributes in XML.
I need to generate names of element locators for a project I am currently doing using Selenium IDE. I can use xpaths, css or dom to find elements and use them to generate names of elements. Can anyone suggest what to use to extract meaningful names from css, xpath or dom? For example, I can use
//li[#id='item1c4994198e']/div/div/a/img
as my xpath to get to the element and use the id attribute to generate a name for the element.
#Vaibhav: Fetching elements with right locater is the Heart of Selenium. Now here are few things which you should always remember.
Never make your script dependent on Absolute Xpath .(i.e path from source like /html.body......). Try to use plug ins like firebug to generate Xpath.. You may also come across a situation where the path generated by firebug may not detect your desired element on the page so option is to use relative path. If you still need more info on it ..you can follow below links
http://www.toolsqa.com/selenium-webdriver/xpath-firebug-firepath/
It is always better to use relative xpath, if you are unable to get the element locator then go for absolute xpath, DOM is limited to Selenium RC only.
is there any way to check which JS script added inline style to particular DOM element? I've been trying to find it manually, but I suppose there is a better way...
If you are using chrome, you can right-click the DOM element you want to watch (in the element inspector of the dev tools), and select Break On - Attributes Modifications.
That's about the closest solution I know of.
I don't think there is a "signature" for a javascript outcome on DOM so i guess you have much choice but disabling one by one your scripts.
Other choice: make a global search with parts of the style in your text editor, it must be stocked somewhere in your code.
jQuery is designed to be used in HTML pages with JavaScript.
SVG uses the same DOM Level 2 as HTML but is XML-based and specifies ECMAScript.
What problems could result from using jQuery with SVG? Would it be preferable to embed such SVG as an element in an HTML document?
Note, I'm not referring to the "jQuery SVG" drawing library which provides for manipulation of an SVG element in an HTML document as a graphics port using jQuery syntax. What I want is to use jQuery selectors and event management on SVG elements, with the SVG root maybe being inside HTML or maybe not.
Trying it out, selectors seem to work but other things don't. The $( function() { } ) idiom to initialize the page doesn't work because SVG only passes an SVGLoad event to the top <svg> element. $('svg').bind('SVGLoad', function(){}) does work, though.
Dynamically adding elements with .append puts them in the DOM such that they don't get rendered, at least on Firefox. The phantom elements remain invisible even after the document is re-rendered including an element dynamically added without jQuery. $().attr(key, value) may change an attribute but not update the onscreen display.
It all seems unfortunately broken. More features work once it's embedded in an XHTML document. But defects such as the above remain and it's probably better to use another framework. Maybe give jQuery SVG another look…