How to get parent of parent's element in webdriverIO? - webdriver-io

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

Related

What could be a reason for not finding a web element by its id?

I have been using Robot Framework for a couple of days now to automate some basic flows tests in my working web app and found a problem:
Can't find some web elements using the id locator
I've been using the SeleniumLibrary for this. Tried with different locators such as xPath and CSS selector, setting an implicit wait before looking for the element and the keywords Wait Until Page Contains Element and Wait Until Element Is Visible, but still it gives the same result.
First of all I check if a certain element is present:
Page Should Contain Element id=some-button
then I try to send some keys to an input:
Input Text id=some-input Some characters
and then I get the error Element with locator 'id=some-button' not found
The page has the following structure:
...
<body>
<div>
...
<div>
<form>
<div>
<button id=some-button />
</div>
<div>
<!--- 8 opening div tags -->
<input id=some-input />
<!--- 8 closing div tags -->
</div>
</form>
</div>
</div>
</body>
...
Does any one have any idea why it happens?
UPDATE:
Tried
/html/body/div/div[1]/form/div[2]/div[1]/div[2]/div[2]/div[2]/div/div[1]/div[1]/div/input
instead of
//*[#id="some-button"]
and that worked perfectly.
What could be a reason for not finding a web element by its id?
These are the reasons I can think of off the top of my head:
the element truly isn't on the page at the time you're looking for it. This could be because you aren't waiting for the page to finish rendering, or it could be that it's genuinely not there.
you could have a typo in the id
the element is in a frame
the element was there, but then got deleted by some executing javascript
Whenever you're using any Xpath or a CSS selector, you should always check in it in Chrome Developer tools.
Steps:
1. Right click the page and click 'Inspect'
2. Go to Console tab
3. If it is a XPath evaluate using: $x and if it is a CSS selector, evaluate using $$
e.g.For
Xpath:
$x("//input[#id='Username']")
CSS:
$$("#Username")

selenium click using span class or onclick

I am a newbie to java and selenium webdriver. I am having an issue clicking an image. Below is the page source.
<a href="javascript:void(0);">
<span class="HomeButton" onclick="javascript:onBtnHomeClick();"/>
</a>
I tried below codes but did not work and still getting the Unable to locate element error.
driver.findElement(By.xpath("//a[#onclick='onBtnHomeClick()']")).click();
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath(".//*[#id='js_AppContainer']/div[2]/div[1]/div[1]/span"))).click();
wait.until(ExpectedConditions.visibilityOfElementLocated(By.className("HomeButton"))).click();
I have to click the homebutton. Any help would be much appreciated
I don't know why By.className("HomeButton") didn't work but you have errors in the other two.
In driver.findElement(By.xpath("//a[#onclick='onBtnHomeClick()']")).click(); the tag for onclick is <span> not <a>. It also not onBtnHomeClick() but javascript:onBtnHomeClick();
driver.findElement(By.xpath("//span[#onclick='javascript:onBtnHomeClick();']")).click();
If you want to use onBtnHomeClick() use contains
driver.findElement(By.xpath("//span[contains(#onclick, 'onBtnHomeClick')]")).click();
Or
driver.findElement(By.cssSelector("onclick*='onBtnHomeClick'")).click();
And in wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath(".//*[#id='js_AppContainer']/div[2]/div[1]/div[1]/span"))).click(); the <span> parent tag is <a>, not <div>
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath(".//*[#id='js_AppContainer']/div[2]/div[1]/div[1]/a/span"))).click();
You simply need the correct locator IF your element will be eventually visible.
Xpath = "//span[contains(#class,'HomeButton') and contains(#onclick,'onBtnHomeClick')]"
Add wait as needed above exanmple, that should work.

Is there a way to handle "nested iFrames" in protractor

I am using protractor to test non-angular application and in a scenario i had nested "iFrames", these iFrames are in div tag. Using protractor i was able to navigate to second iFrame, but could not read any elements on page. Let me know if you have any suggestions on this.
<div class="modal-content" modal-transclude="">
<iframe id="frame1" name="newContentItemframe" onload="onLoadDone();"
<iframe name="frame2" id="form_iframe"
<input type="text" class="iw-formspub-textbox-active" name="Content/Title" id="field_0">
</iframe>
</iframe>
</div>
Use switchTo(), which takes a name or index, to switch to the frame/window containing your elements. Also, don't forget to switch back!
browser.switchTo().frame('frame2');
// access elements in the frame...
// then switch back to main window
browser.switchTo().defaultContent();
Maybe not very elegant solution, but picking up the second iframe wasn't working for me, so I had to go with:
browser.switchTo().frame(0);
and then, once in the first frame, again:browser.switchTo().frame(0);.

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

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.

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
});