Click DIV doesn't make a “real” click operation in IE - testing

Browser: Internet Explorer 8 with compatibility view turned on (the tested application was written for IE7). I have a div element, which looks like a checkbox in the browser. When I manually click it the checkbox ticks itself. Here is how this looks like: http://img593.imageshack.us/g/divunchecked.jpg/ When clicked manually the div element also changes it's class attribute from "x-grid3-check-col" to "x-grid3-check-col-on". When I run a Watin test and make a Div.Click() operation the element doesn't check itself. Html of that element:
<DIV class=x-grid3-check-col onclick=booleanInterviewColumnRender_OnClick(this);> </DIV>
I have tried to:
- click 2 of the div's parents (it is placed in 2 other divs)
- Div.MouseDown();
Div.MouseUp();
- Div.Firevent("onclick");
- NameValueCollection eventProperties = new NameValueCollection();
eventProperties.Add("button", "0");
Div.FireEvent("onmousedown", eventProperties); //left mouse click
- Div.SetAttributeValue("class", "x-grid3-check-col-on");
Div.Refresh();
without luck.
Any ideas how to workaround this would be great.

The last workaround is to run directly the javascript call.
if you put an id on your div element: elementID
then you call
div.Document.Eval("document.getElementById(\"elementID\").fireEvent(\"onclick\")");
And it will call the onclick call back you put in your attribute (you can first try in the console to be sure that the javascript call your callback).
However, I think that the WatiN mehod .FireEvent on the Element does the same thing, so I don't understand why you need this workaround.

Related

How to get parent of parent's element in webdriverIO?

I am running tests for iPhone safari on browser stack. But click command is not working for iPhone safari on browser stack Selector seems to find an element correctly, but click does nothing and no error,no action ,just silently not executing click.
Same test running perfectly with android device. This is issue with dom structure and I wants to click on parent of parent's element.
I have tried below code snippet and worked for me.
const element:WebdriverIO.Element = $('selctor');
let parentEle = element.$('..').$('..');
Should be possible with xpaths using the xpath axes, specially ancestor
<div class="one">
<div class="two">
<input>
</div>
</div>
To find the parent elements of input you could use an xpath like
browser.$('//input//ancestor::div[1]') //finds div with class=two
browser.$('//input//ancestor::div[2]') //finds div with class=one
Sounds like you need
browser.$('//input//ancestor::div[2]') //finds div with class=one

Selenium and StaleElementReferenceException

I am using selenium 3.9.1 and java to automate testing of a web application. The web application has some dynamic content based on pressing of a button for example. The page refreshes whenever this button is clicked. A java script runs on button click and updates the DOM I think. At this time, when I try to access the button (which is visible on the page), I get a staleElementReferenceException.
Does Selenium automatically reload the DOM once it is changed? I am relatively new to selenium. I have researched into this and I have tried to refresh the page using driver.navigate().Refresh() to try to see whether this will solve the problem. It does not solve the issue.
Any pointers will be deeply appreciated.
Since the page has been refreshed, the button reference you have is to the button on the old page that no longer exists.
I'd say you need to get a new reference to the button on the refreshed page (eg call FindElementById).
If the page is refreshed all the items in the DOM are now stale. What this means is that all items found before the button press will have to be found again. Any attempts to use those items will more than likely be treated with a stale element exception.
However, if the button click mearilly affects items on the page without having to ask the webserver to give you a new page you could interact with the old items.
You could do something like this:
public void SaveAndAgainClick() throws Exception{
try{
clicksaveButton(); //method to click save button
WebElement someValue = driver.findElement(By.xpath("(//input[#name='someValue'])[1]"));
someValue.click();
}catch (StaleElementException e){
WebElement someValue = driver.findElement(By.xpath("(//input[#name='someValue'])[1]");
someValue.click();
}
}
If findElement gets staleElementError while looking for (//input[#name='someValue'])[1] then it will again try one more time in the catch block and most certainly find the element and clicks on it. Your test will pass if you follow this approach.
Here are the answers to your questions :
A java script runs on button click and updates the DOM I think : If you inspect the HTML of the element through Development Tools / Inspect Element the element attributes will reveal it all.
Consider the following HTML :
<input value="Click me" onclick="alert('Click!')" type="button">
In the given HTML as per the onclick attribute of this element, if you invoke click() method on the WebElement, an alert would be generated. Similarly the onclick attribute may invoke a JavaScript or Ajax which may bring-in/phase-out new/old elements from the HTML DOM
At this time, when I try to access the button I get a staleElementReferenceException : In this case you should induce WebDriverWait for the WebElement to be interactive before attempting to interact with the element. Else you may face either of the following exceptions :
StaleElementReferenceException
WebDriverException
ElementNotInteractableException
InvalidElementStateException
Does Selenium automatically reload the DOM once it is changed? Short answer, Yes it does.
Refresh the page using driver.navigate().refresh() : No invoking driver.navigate().refresh() wouldn't be a optimum solution as it may not invoke the intended JavaScript or Ajax properly. Hence the intended WebElement may not be interactive in a optimum way.

Click on link using selenium and webdriver

I have been trying to perform a selenium task on it:
In this page, there is a button which i have to click on it and then wait for 10 seconds. I did it like this:
Naviagation to page:
base.driver.navigate().to("http://suvian.in/selenium/1.7button.html");
Click on button:
//base.driver.findElement(By.xpath("/html/body/div[1]/div/div/div/div/h3[2]/a"));
base.driver.findElement(By.linkText("Click Me"));
This step fails
Wait for 10 seconds:
TimeUnit.SECONDS.sleep(waitTime);
Questions:
1-it fails on clicking on the button. Although, i asked to find the link both with xpath, and text it cannot find it?
2-Is my solution correct for make a delay on webdriver's activity?
Try Below code for clicking on the "Click Me" button, tried on my local:
driver.findElement(By.xpath("//div[contains(#class,'intro-message')]")).findElement(By.partialLinkText("Click Me")).click();
Explanation for the above code : Thumb rule is try to go from the parent element of the DOM. In the above post, your parent element for the button is div class = intro-message . Once the parent element is located, then next find the child elements. In your case it was the button with link text 'Click Me'.
//base.driver.findElement(By.xpath("/html/body/div[1]/div/div/div/div/h3[2]/a"));
base.driver.findElement(By.linkText("Click Me"));
Also, the way you have written is not correct. This will fail in case more element are added in between like a new div or a new button. Try avoiding this.
Yes for the current scenario, your way of making wait is right. But for other use case it might not be right to make your application wait explicitly.

Selenium Webdriver drag'n'drop from parent to child iframe

I've been looking for any working solution to drag'n'drop for the past 5 days.
So,
Selenium.WebDriver 2.44.0
WebDriver.ChromeDriver.win32 2.13.0.0
Chrome latest version.
C#, Page object pattern.
Sorry for russian descriptions on screens :)
We have .net cms. It has pages Editor. Editor opens in parent page, page to edit if loaded in iframe from the same domain.
I need to drag'n'drop items (pictures, video, etc) to a concrete containers in iframe.As far as I understood the following is used in CMS: This file contains following files: jQuery 1.11.1 + jQuery UI 1.10.4 + jQuery Migrate 1.2.1 */).
Piece of code: http://screencast.com/t/ArEk54ue
Here is a scenario during drag'n'drop:
In parent content I select some element id=someelement. (String is not active).
I click and hold on element, pulling it into iframe.
The following code appears in parent page:
Child element appear in String from the 1-st step. It's our element.
See screen: http://screencast.com/t/Cio4knwp
When I pull element to iframe onmouseover event fires and child string appear in the following string:
http://screencast.com/t/cpj3ihlE959
Containers change their color to green on mouseover.
Container code inside iframe:
http://screencast.com/t/Z6QBD6IYuB
What I've tried to do:
Simple webdriver drag'n'drop doesn't work since target element inside iframe.
Drag'n'drop by X,Y offset doesn't work too.
Drag'n'drop using Actions:
MoveToElement:
public Actions MoveToElement(IWebElement element)
{
var builder = new Actions(Webdriver);
return builder.MoveToElement(element);
}
source - picture which I pull
target - container.
WrapperSelenium.MoveToElement(source)
.ClickAndHold(source)
.Build()
.Perform();
WrapperSelenium.SwitchToFrame("WebsiteFrame");
WrapperSelenium.MoveToElement(target)
.Release(target)
.Build()
.Perform();
Doesn't work too.
4.I've tried to use some Javascript hacks, don't remember exactly what - no success.
Now I'm trying ro use jquery-simulate (https://github.com/j-ulrich/jquery-simulate-ext) - I can click an hold element, containers become active, but I can't release element and find target.
Please help!
I decided to use AutoIt - developers made to complex code structure

dijit.Menu to be displayed after DOM had been set up

I have set up in Javascript my preferred dijit.Menu which is that far so good.
How am I able to display the dijit.Menu directly after the page starts up in the (with it's position) without any mouse interaction?! I have looked in the API so far and don't find the answers. Will I have to "overwrite" a method?
If yes, which one is it? And what do I have todo???
The widget will not show up until it is parsed by dojo.
You should place fake menu markup inside its dom node:
<div dojoType="dijit.Menu">
<h1>This text is shown after the dom is loaded
and until the menu is parsed and renered</h1>
</div>
As soon as menu is ready, everything you've placed inside menu's dom node will be replaced by actual widget's html.
NON-AMD Version:
dojo.ready(function(){
// The code for all items!
})
DOJO-AMD Version, put the parameters of the modules you like to add, in require as well give them a name in the functions parameters list:
require(["dojo/domReady!"],function(){
//natve code
});