OpenTest support for Dojo toolkit - dojo

I'm trying to use OpenTest with web applications created with IBM EGL using the Dojo toolkit. The issue with dojo is that it dynamically generates id's every time so they cannot be used as a locator. In addition many elements do not have an xpath so that can't be used either.
It seems like this is a common issue when I search for "dojo" and "selenium" but I haven't found any solutions yet.
Other testing tools have "explicit" support for specific frameworks (e.g. like dojo) so I assume it's technically feasible.

Here is an excerpt from a website where this same question was asked and OpenTest supports building out macros that do just what this indvidual was able to do with .NET code. Please reference the blockquote below as well as the source
I use Selenium to Test my web application which is built by dojo/dijit
and asp.net MVC, so far it works fine.
I've faced the same issues with yours before. My way is "don't think
about dojo widgets" when writing steps interacting with them. Treat
them as normal complex html elements. You need to browse your dom tree
on the client after dojo parse your widgets, locate the real dom
element which dijit's value node or interactive part corresponding to
and do thing (Click, SendKey or GetId in your case) to it.
It is also good to wrap some common actions to widgets into Helpers
which can be reused in your project.
Below is a simple .NET example I use to test whether a button exist in
a dGrid, I just use css selector to find the cell, hope it helps:
[Then("I can delete it at row '(.*)'")]
public void Then_I_can_delete_it_at_row(int rowIndex)
{
var nthRow = Browser.FindElementsChecked(By.CssSelector(".dgrid-content .dgrid-row-table")).ElementAt(rowIndex - 1);
var deleteBtnsInRow = nthRow.FindElementsChecked(By.XPath(".//span[text() = 'Delete']"));
Assert.AreEqual(1, deleteBtnsInRow.Count);
}

Related

Finding xpath of shadow dom elements with robot framework

I'm writing automated UI tests using Robot Framework with python. I'm testing a Polymer application that uses the shadow dom Robot's standard libraries don't seem to be able to locate elements in the shadow dom using xpath.
I've been sorting through selenium's repo/overflow/internets and polymer's repo/overflow/internets and haven't found the intersection of a solution for using robot with python (the selenium workaround isn't that graceful either). I was hoping someone had run into this issue with this specific framework that might be willing to share a solution (or note that there's not one).
Test Case
Wait Until Page Contains Element xpath=(//html/body/some-root-shadow-dom-element/input)
This of course results in an error because the shadow dom is not put into the main document of the DOM tree.
Open the browser console and type this into the console:
dom:document.querySelector("apply-widget").shadowRoot.querySelectorAll("div)
Make sure to hit enter after so it will be ran.

"Cannot locate an element using By.xpath" error in selenium java

I am getting Cannot locate an element using By.xpath error in Selenium using Java(IE11). I am working on a web page created using Adobe AEM(CQ5).
I have tried the following possible solutions but neither of it helped.
Tried to add wait.
Switch to active window.
Tried even on Chrome.
Bring focus on element.
Currently using the absolute path (/html/body/div[4]/header[1]/div[1]/div[2]/div[5]/div[1]/nav/ul[1]/li[3]/a) but also used relative path (.//*[#id='cq-gen188']/nav/ul/li[3]/a).
Also searched whether there is any iframe involved. Unfortunately there was none.
To find the xpath, I have used FirePath plugin in Firefox. When i search for the element using the xpath in Firefox, i am successful. But when i execute the code i get the error.
If you are in the correct IFRAME then you can use
driver.findElement(By.id("cq-gen188"));
Remember that ID is always unique and that's a core assumption for all of the libraries in the authoring UI whether it is from core AEM framework or from custom components.
Your problem may be due to incorrect IFRAME as AEM neatly makes the UI look like a seamless window but there are IFRAME in place to facilitate various authoring navigation experiences.

How to inject CSS into webkit?

On Linux I'm creating a webkit window which needs to display a certain URL.
I'm doing that like the following:
GtkWidget *main_window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
// Create a browser instance
WebKitWebView *webView = WEBKIT_WEB_VIEW(webkit_web_view_new());
// Put the browser area into the main window
gtk_container_add(GTK_CONTAINER(main_window), GTK_WIDGET(webView));
// Load a web page into the browser instance
webkit_web_view_load_uri(webView, "http://example.com");
// Make sure that when the browser area becomes visible, it will get mouse
// and keyboard events
gtk_widget_grab_focus(GTK_WIDGET(webView));
// Show the result
gtk_window_set_default_size(GTK_WINDOW(main_window), 800, 600);
gtk_widget_show_all(main_window);
However, I need to inject some CSS into this to hide a certain checkbox.
How do I inject CSS into the DOM.
I see that I can get the dom like
WebKitDOMDocument *dom = webkit_web_view_get_dom_document(webView);
But from here I can't see how to inject the CSS.
It sounds like the webkit_web_view_run_javascript() answer was a good solution to your specific problem, since you only needed to hide one checkbox.
To answer the general problem of how to inject arbitrary CSS: if you're using a recent version of WebKitGTK+, create a WebKitUserContentManager, call webkit_user_content_manager_add_stylesheet(), and then pass the WebKitUserContentManager when creating your WebKitWebView, either using webkit_web_view_new_with_user_content_manager() or by using g_object_new() manually if you need to set multiple construct-only properties.
Unrelated warning: webkit_web_view_get_dom_document() was removed in WebKitGTK+ 2.6. (The DOM API is only accessible via web process extensions nowadays.) You are using an old, insecure version of WebKitGTK+!
Its not clear which Webkit GTK version you are using, however concepts essentially remain same for both versions. For webkit version 2, its slightly more complicated as DOM manipulation is done on extension side.
You need to reach to the desired element - either by id e.webkit-dom-document-get-element-by-id or by name. This will return you instance of WebElement. If you use by name call, please be ware that there could be multiple elements with same name
From here you can either set the style by setting appropriate style attribute webkit_dom_element_set_attribute or other variations that can deal with styles and css rules.
Or you can take easy option and just execute the javascript that does the same thing by calling webkit_web_view_run_javascript

Test case automation

I am new to test automation and I need help of experts who can help me in proceeding with the current difficulties.
Currently there is a web browser application which is tested manually based on the test cases in an excel.
There is also an automation framework also which uses Selenium and uses WebDriver and runs on Google Chrome.
The test cases(in excel) used for manual are taken up and another set of test cases(in excel) are written which is nothing but the div elements and the action which the framework should do like click or find which the framework will understand.
1.First I need to manually find out each div id for all the elements and put it in excel which the framework understands.How can I avoid this?
2.Also a new version of the application has come in which all the div id for the elements differ.Hence its pain to note the div id again and put them in excel.
How can I write the test cases only once for each case even if the div changes?
Please help.
Follow a design pattern, e.g. Page Objects
If ids will be changed try to use css and xpath selectors that do not stick to ids. The main idea is to specify such selectors that allow tests to find elements on the page using knowledge by their parents, tag names, other attributes that won't change (class and so on).

What is the point of getEl() in extjs4

I have a listener that is called when a tab is activated.
, listeners: {
activate: function(tab){
var first = tab.down('input'), // will be null
firstEl = tab.getEl().down('input'); // will contain first input element
I'm not having a lot of luck understanding the relationship between tab and tab.getEl(). If this was jquery, $(tab) would give me a jquery element which would largely expand on my set of options. extjs seems to be almost backwards in this regards, or at least more complicated.
I'm trying to understand when and why I need getEl() so that it is less of a development crapshoot about what will and won't work. In other places I do things like:
showFieldHelpOnBlur = function(ctrl) {
ctrl.up('form').down('#helptext').update("");
}
without the getEl(). In this case form is an element tag just like input (above), but I don't need the getEl() before I use it. In general the two sets of functionality that share the same names but don't work the same are frustrating, and the docs don't seem to give any clue as to why there are multiple methods with the same names that do different things, or do similar things in a different way.
Found some similar issues with focus(), but those might make more sense if I just understood why are there are 2 seemingly parallel sets of methods for what are essentially DOM elements wrapped in additional functionality.
I think at the core of your confusion is how you approach the development using ExtJS vs JQuery.
JQuery is all about DOM manipulation and low level API. ExtJS approach is very different, it wants you to think of your page structure as a hierarchy of ExtJS components that are responsible for rendering appropriate HTML. So ExtJS is essentially saying: "Don't worry about html, we'll take care of it - you focus on the larger components, layouts, events, etc. "
You will say "Whoa Nelly! What do you mean don't worry about html? I want control!" And ExtJS will respond OK - we have a wrapper object called Element (http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.dom.Element) you can use it to do DOM manipulation just like you are used to with JQuery .. but be cautious. Because if you manage your own HTML we can't be responsible for what happens to your layouts and components that are not managed by the framework.
My advice is this - when in Rome do like Romans do :)
If you are going to be using ExtJS to build apps - embrace the way ExtJS is designed to work. Learn the different layout mechanics and numerous component types available to you out of the box. Use the MVC development pattern to beautifully organize your code. Use the examples to your advantage. Study the architecture and component guides - these are very useful. Understanding ComponentQuery class is a must (all those up/down methods and query).
At the end, when you have gained comfort using ExtJS components and their style of development you will be very efficient at building your UI compositions and can build much more complex applications than before.
Good Luck!
Pro Tip: Do yourself a favor and get Illuminations for Developers plugin for Firebug - it will open your eyes to see things using component structure rather than HTML elements.