Testing embedded HTML form via Selenium IDE - testing

I have an html page that has a small piece of JavaScript that further embeds an HTML form in a div tag (this div is identified by an ID).
I want to use Selenium IDE to test the form. I recorded a basic test to test the embedded form but Selenium seems to be failing. It cannot find the elements or the text.
I got the source of the parent html page but it does not have any Form html. Firefox allows you to see the Form html by going to 'This Frame->View Source'. The embedded html is whole html page not just the form - I mean it starts and ends with <html> tag
I was wondering how could I test the embedded form using Selenium IDE ? I searched a lot and found 'SelectFrame' but all the examples on the web include Java code (that I do not wish to get into) as opposed to plain HTML (I would like my test to be plain HTML Selenium test cases and would like to keep it simple).
Also, I doubt if 'SelectFrame' is going to help as the form gets embedded in a 'Div' tag and not in the frame.
Any help is greatly appreciated.
Thanks

you have a frame and frame have some name, please use this and let me know
selectFrame | frame name |
verifytext | text
selectWindow | null - this for release the frame
please show me once your script so that I will help you futher

use
driver.switchTo().frame("marco");
replace "marco" with your own frame name

Related

Selenium Inspect : 2 divs same footer

I am using Selenium IDE to conduct testing my website.
Please refer to the above image. I have 2 windows one over the other and I need to get the xpath of the 2nd footer that is the last in the image.
When I use Selenium it picks but does not work as expected. In a situation like this how do I know the xpath and which to use in Selenium.
Thanks
You can do this to access the 2nd element with that xpath
driver.find_element(BY.XPATH,"(//div[#class='footer'])[2]")
If you need any of those individual values.
I would use link_text since they all have different text values and are all of a tags.
driver.find_element(BY.LINK_TEXT,"Upload")

Identifying ExtJS elements with selenium webdriver

I am having handling a drop down button in EXTJS application which i am trying to automation with selenium web driver.
clicking on the image i will get a list of elements in the form of 's
to click select from
Please help me how i can device a xpath to click this image, which i should not use "id" (as its extjs it might vary every now and then).
if there are any selector i can use for extjs please suggest. Thanks for your help.
<DIV id=ext-gen2337 class=x-form-field-wrap style="WIDTH: 0px"><INPUT id=ext-gen2023 class=" x-form-text x-form-field" style="WIDTH: 297px" readOnly size=24 value="Clients with pending exceptions" name=ext-gen2023 autocomplete="off"><IMG id=ext-gen2338 class="x-form-trigger x-form-arrow-trigger" src="https:REDACTED/com.ssc.epw.gui.EPWHome/clear.cache.gif">
Try below XPath to match required img element:
//input[#value="Clients with pending exceptions"]/following-sibling::img
So if you want to start testing ExtJS app and you don't want to use the best solution for this such as Sencha Test or Bryntum Siesta.
The best way to approach this is to write you own layer between the ExtJS components and the html dom of the site.
You can see more info in my answer here https://stackoverflow.com/a/41718879/1768843
But what you need to do is to use the Ext.Component.Query, with Selenium you can execute the javascript code on the site. So you execute the ext query and you pass there the Ext selector - for example button[text=something] or panel[name=mainPanel] simply any ExtJS component selector. This will return you the ExtJS object and with it you can simply call .getDom() or .getId() which will return you the actual dom or id used in the HTML. Next you can simply use the webdriver functions for clicking (or something) on the HTML elements in the site.
^^ You need to do this because the ExtJS framework can generate the HTML every-time little bit differently. For example you add new container or you upgrade your ExtJS version and the HTML is changed and your test can stop working. But if you call the Ext components as log as the Ext source code is still the same your tests will be always working.
But doing this is quite a hassle and lot of work. It's much better to use prepared solutions such as Sencha Test where everything is already prepare for testing ExtJS apps.
I would do something like this:
driver.findElement(By.xpath("//div[contains(#class, 'x-form-field-wrap')]//img"));
or
driver.findElement(By.xpath("//img[contains(#src, 'https://REDACTED/com.ssc.epw.gui.EPWHome/clear.cache.gif')]"));

How to get Inspect Element code using Selenium WebDriver

I'm working in selenium with Firefox browser.
The Html code shown in View Source (CTRL+U) is different from the html code i see when inspecting the elements in Firefox.
When i run the driver.getPageSource() i only get the View source (CTRL + U) codes.
Is there is any way to access the Inspect element code instead of View source code?
I think your question is answered here.
The View Source html is what is sent by the server. I think of it as compile time html, or the initial state of the DOM.
The Inspect Element html could have been updated by ajax responses or javascript so will not necessarily be the same. I think of it as runtime html, or the current state of the DOM.
The GetAttribute() method queries the current DOM element state. You can return a particular html attribute value directly
webElement.GetAttribute("class")
or get the whole html string.
webElement.GetAttribute("innerHTML")
There are some fundamental difference between the markup shown through View Source i.e. using ctrl + U and the markup shown through Inspector i.e. using ctrl + shift + I.
Both the methods are two different browser features which allows users to look at the HTML of the webpage. However, the main difference is the View Source shows the HTML that was delivered from the web server (application server) to the browser. Where as, Inspect element is a Developer Tool e.g. Chrome DevTools to look at the state of the DOM Tree after the browser has applied its error correction and after any Javascript have manipulated the DOM. Some of those activities may include:
HTML error correction by the browser
HTML normalization by the browser
DOM manipulation by Javascript
In short, using View Source you will observe the Javascript but not the HTML. The HTML errors may get corrected in the Inspect Elements tool. As an example:
With in View Source you may observe:
<h1>The title</h2>
Whereas through Inspect Element that would have corrected as:
<h1>The title</h1>
getPageSource() always returns the markup obtained through View Source.

Type text in RadEditor using selenium

I am automating a webpage using selenium.
My Problem is selenium is unable to type the text in hidden fields. I used
selenium.type("xpath of hidden field","some text");
But it is not working. It's not giving any error, but not typing anything into that hidden field.
Example: Typing text into Gmail's body field(in composing mail). this is the exact example of my issue
This is Rad Editor. So code is something like this(here the text is saving inside iframe-->html-->body)
<iframe id="iframe1">
<html>
<body> This is some text </body>
</html>
</iframe>
There's just no way you'll force Selenium to type into a hidden element.
Would this work? It uses Javascript's document.evaluate() to find the element by XPath and then types directly into the found element's value.
selenium.GetEval(
"var xpath = '//XPath/to/your/element';" +
"var text = 'some text to input into the element'" +
"var elem = window.document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);" +
"elem.singleNodeValue.value = text;" );
If not, try to run it in FireBug and post the result (or error) here.
The next thing to try would be to try to make the element visible...
EDIT - the above won't work
You have like all the problems in one place :)
An iframe. You must select it before trying to interact with anything inside.
If the iframe loads anything from a different domain, then the Same origin policy for JavaScript kicks in. And since Selenium RC is written in pure JavaScript, it can't do anything. You can either switch to WebDriver which doesn't suffer from this, or try to reopen the browser on the internal address of the iframe. Might not work, though.
The body tag in the iframe is contenteditable which is a problem solved by WebDriver. Selenium RC should be able to type() into it just as well.
An invisible textarea. That's your last problem. If you really needed to write into it (there's the editable body), you you'll have to use JavaScript, because Selenium RC refuses to work with invisible elements.
As this is a RadEditor the text is going inside iframe-->html-->body (This is in my case. It may be different for different Editors)
So in order to write text, first we need to select the iframe. And then we have to enter the text. This can be done as
selenium.SelectFrame("xpath_of_iframe"); //Selecting the iframe
selenium.Type("//html/body","Thank you"); //Inserting the text
So now the code changes to
<iframe id="iframe1">
<html>
<body> Thank you </body>
</html>
</iframe>
Thank you.

Selenium - How to match image presence and location on page

My query is that - I have my images on webpage- a logo or say navigation bar i can store as an image. Can i test using selenium presence of these images on a webpage when loaded along with the position of the image on page.
What my issue is that i need to actually look at image objects in HTML and also may be images not in HTML but they are partial screenshots of webpage which i want to match. This test will help me pick alignment issues - in case my navigation bar is now going to second row i can match with previous stored image to check.
Thanks
VB
An example on how to check if a particular image is present:
In this page:http://www.google.ie/firefox?client=firefox-a&rls=org.mozilla:en-US:official
Selenese command
Command: verifyElementPresent
Target: //td/table/tbody/tr/td/table/tbody/tr/td/img[#src='/images/firefox/Fx4Launch.png']
Hint: If you want help to get the XPath for a particular element I recommend you using a plugin like Firebug (http://getfirebug.com/)
Put an extra "\" in the beginning of the xpath copied by Firebug, otherwise selenium do not find the element.
You can verify that an image is at a location like so:
verifyElementPresent //div/p/img
This example uses XPath to locate an <img> element that follows a <div> and <p> tag.
But verifying that a screenshot is the same as the rendered page? You're talking about a completely different problem, which is image recognition. Selenium is a tool for automated acceptance testing.