Unable to locate dropdown created by jQuery plugin - c#

I am writing an automation test script in C# using Selenuim Webdriver where I need to click on two dropdowns one by one. Here is the HTML source code of the two dropdown elements:
<select id="ServiceTypeId" class="chosen chzn-done" tabindex="-1" name="ServiceTypeId" style="display: none;"></select>
<div id="ServiceTypeId_chzn" class="chzn-container chzn-container-single">
<a class="chzn-single" tabindex="-1" href="javascript:void(0)"><span>Choose an Option</span></a>
<div class="chzn-drop"></div>
</div>
</div>
<select id="PropertyTypeId" class="chosen chzn-done" tabindex="-1" name="PropertyTypeId" style="display: none;"></select>
<div id="PropertyTypeId_chzn" class="chzn-container chzn-container-single">
<a class="chzn-single" tabindex="-1" href="javascript:void(0)"></a>
<div class="chzn-drop"></div>
</div>
I am able to successfully locate an element in the first dropdown (ServiceTypeId) by CssSelector like this:
driver.FindElement(By.CssSelector("div.chzn-container a.chzn-single")).Click();
Thread.Sleep(1000);
driver.FindElements(By.CssSelector("div.chzn-drop li.active-result"))[5].Click();
Thread.Sleep(500);
But I am unable to locate the second dropdown(PropertyTypeId) as they both have the same classes applied to them.
I tried using to locate them using their ID but its not working:
driver.FindElement(By.Id("PropertyTypeId_chzn")).Click();
I think this plugin has been used to create the dowpdowns: jQuery plugin
Can someone please help me find a way to do this?
EDIT:
The two elements are set to display:none and hence when I am trying to click them using driver.FindElement(By.Id("ServiceTypeId")).Click(); I am getting the error:
Element is not currently visible and so may not be interacted with

Try css3 pseudoselector
driver.FindElement(By.CssSelector("select:nth-of-type(1)")).Click();

It doesn't matter how these dropdowns were created, problem with selector i think. BTW, if in future you want to select value from dropDowns don't forget to click on dropDown first, then select value from it. Anyway, next code should work:
driver.FindElement(By.CssSelector("#ServiceTypeId"));
driver.FindElement(By.CssSelector("#PropertyTypeId"));
UPDATE
//Click on first a link then li will appear in div. Click on 6th elem
driver.findElement(By.CssSelector("#ServiceTypeId_chzn > a")).click();
driver.findElements(By.CssSelector("#ServiceTypeId_chzn .chzn-drop > li"))[5].click();
//Same for second
driver.findElement(By.CssSelector("#PropertyTypeId_chzn > a")).click();
driver.findElements(By.CssSelector("#PropertyTypeId_chzn .chzn-drop > li"))[5].click();

I found out the solution to this and would like to share it as it may help someone else facing similar issue.
The main problem was that the elements were set to display:none and so before clicking them they should be made visible. I can be done using JavaScript like this:
IJavaScriptExecutor js = driver as IJavaScriptExecutor;
js.ExecuteScript("document.getElementById('ServiceTypeId').style.display = '';");
Thread.Sleep(500);
driver.FindElement(By.Id("ServiceTypeId")).Click();
Thread.Sleep(300);
js.ExecuteScript("document.getElementById('PropertyTypeId').style.display = '';");
Thread.Sleep(2000);
driver.FindElement(By.Id("PropertyTypeId")).Click();
Thread.Sleep(500);
Thanks.

Related

Clicking a text link - Using Selenium

The link that I am trying to click is not being recognized at all. Developer tools in chrome shows me the link as in structure below:
<main
<div
<ifreame
#document
<html
<body
<form
<div
::before
<a href=wizard_view.do? sys_action=sysverb_wizard_ans&WIZARD:action=follow&wiz_referring_url=&wiz_collection_key=&wiz_collectionID=&wiz_collection=&wiz_collection_related_field=&wiz_view=&wiz_action=sysverb_new&sys_id=ea7d96126f92a100f3ae60526e3ee4e0&sysparm_query=active=true&sysparm_target=&sys_target=change_ddfdff>Standard (from Template)
</a>
::after
</div>
....
How do I identify and click this particular text link?I tried css selector,xpath etc but didn't work
anchors = dd.findElements(By.linkText(Standard (from Template)));
anchors2 = dd.findElements(By.cssSelector(a[href*='ea7d96126f92a100f3ae60526e3ee4e0'] )));
Also there are a 10 div sections with same class name each of which is a text link. I want to click on of them (see above)
When you try to search for elements inside an iframe, you have to switch to that frame first
driver.SwitchTo().Frame(driver.FindElement(By.Id("_the_frame_id")))
Switching to frame solved my issue . But in the next page also I have the same freme (id/name) and I am not able to identify an input text box even though I have already switched to the frame.
I am getting 'NoSuchElementException' when:
driver.switchTo().frame(driver.findElement(By.id("gsft_main")));
WebElement stdFromTemplate = driver.findElement(By.linkText("Standard (from Template)"));
stdFromTemplate.click();
WebElement stTemplate = driver.findElement(By.id("cced8819db987e08dee9f7b31d961989_text"));
This last line(which is a new page now after clicking on the link that i was mentioning in the initial question) line give me 'NoSuchElementFoundException'

C# - PhantomJS/Selenium - Click event doesn't register on a button inside a modal

I'm having some issues with automating a website using PhantomJS/Selenium WebDriver in C#.
Part of the website has a check on addresses; entering in an address it can't verify (or just not entering an address at all) brings up a modal div with buttons in it. Depending on the situation, it will either give you the closest address, or the option to just continue without an address, but the button always has the same id. The HTML for this div (for the "no address entered" version) is here:
<div id="confirmAddress" class="col-xs-5 active-popupbox">
<div class="row vert-offset-top-2">
<p style="margin-left:55px;" class="h3">No Customer Address Provided</p>
<br>
<div style="margin-left:42px;margin-bottom:0px;" class="modal-body">No Customer Address Was Entered. We recommend having the Customer provide an address.</div>
<br>
<div class="col-xs-6">
<button type="submit" class="btn btn-default" style="margin-left:45px;width:200px;" id="confirmBack" name="confirmBack" align="center">Enter Address</button> </div>
<div class="col-xs-6">
<button type="submit" class="btn btn-default" id="confirmPopUp" name="confirmPopUp" align="center">Proceed with No Address</button>
</div>
</div>
</div>
The button I need to click is the last button, <button type="submit" class="btn btn-default" id="confirmPopUp" name="confirmPopUp" align="center">Proceed with No Address</button>
However, despite seemingly being able to find the element in my code and calling Click() on it, grabbing screenshots show that it apparently doesn't register the click since the modal popup stays on the page and the next part errors out due to not finding the elements I'm asking it to find.
Here is the relevant portion of my code:
File.WriteAllText(#"C:\Users\user1\Documents\Testing\source0.html",
_driver.PageSource);
_driver.FindElementById("contactinfo_next").Click();
if (_driver.FindElementByClassName("active-popupbox").Displayed)
{
_driver.GetScreenshot().SaveAsFile(#"C:\users\user1\documents\testing\screenshot01.png", ImageFormat.Png);
_driver.FindElementById("confirmPopUp").Click();
}
_driver.GetScreenshot().SaveAsFile(#"C:\users\user1\documents\testing\screenshot02.png", ImageFormat.Png);
I use the class name to find the div since they apparently have different id's depending on whether the address was "not provided" or "wasn't verifiable but a close match was found", but the class is always the same.
I have PhantomJS grabbing the source before clicking the "contactinfo_next" button, which is what brings up the modal div, and have confirmed that no div with class "active-popupbox" exists before the contactinfo_next button is clicked. "screenshot01.png" does get saved, which means that it is finding the div... but it still doesn't register the button click.
I have tried clicking other elements in the div to bring it "into focus", calling Click() twice on the button, assigning the div to a variable called div and then finding the button using div.FindElements(By.Id("confirmPopUp")) and clicking on each element in the collection, nothing has worked.
Has anyone else run into this issue?
Thanks!
EDIT: I'm using the following NuGet packages for this:
PhantomJS
Selenium WebDriver PhantomJS cross platform
Selenium WebDriver Support Classes
Selenium WebDriver
Okay so I don't know if this is specific to this site that I'm trying to automate, but resizing the PhantomJS viewport worked - in my screenshots, the modal's buttons were overlapping each other. Not sure why it matters but this is what ended up solving my problem. ¯\_(ツ)_/¯
To resize the viewport (requires System.Drawing):
_driver.Manage().Window.Size = new Size(1920, 1080);
Hope this helps anyone else who has a similar problem in the future

Execute a java script to make an element visible

I'm trying to automate the use of a website using Selenium, at one time I want to click on a hidden button defined this way :
<body>
<div class="smenu" id="smenu4">
<input tabIndex="-1" type="button" onclick="SearchEng" value="FindEng" />
<!--> Lots of inputs <!-->
</div>
</body>
I already tried to simply click the button, but it doesn't work. I can select it and retrieve information though. That's why I'm now trying to run a javascript to make the button visible before clicking it. Here is my code :
IWebElement element = driver.FindElement(By.XPath("//div[#id='smenu4']/input[#value=FindEng"));
String js = "arguments[0].style.height='auto'; arguments[0].style.visibility='visible';";
((IJavaScriptExecutor)driver).ExecuteScript(js, element);
The thing is nothing happens when I launch it. Is it possible that I can't run scripts ? Can you run them on any website ? - I use internet explorer 11, windows 7. Thanks !
Inspect the element in your Browser and check that what is the reason that the element is invisible. Or just simply compare the element when it is visible or not. Possible reasons:
The element is not in the DOM yet.
The element hasn't got width and/or height.
visibility parameter. (http://www.w3schools.com/cssref/pr_class_visibility.asp)
display parameter. (http://www.w3schools.com/cssref/pr_class_display.asp)
When you know the reason, you will know the solution :)

C# WebBrowser HTMLElement.InvokeMember("click") not working within <form> tag

I'm writing a C# form application which automates some user behaviour by clicking through buttons, links, forms, etc in a WebBrowser. Everything worked fine, im using InvokeMember("click") without problem on several buttons and links, but now i'm stuck with one click.
I'm struggling for days, and i have tried several tips, but nothing worked yet. The HTML code with the form basically looks like the following:
<form name="shipsChosen" id="shipsChosen" method="post" action="http://www.example.com/index.php?page=2">
<li class="off" id="button1">
<div class="buildingimg"></div>
<input id="ship_1"/>
</li>
<li class="off" id="button2">
<div class="buildingimg"></div>
<input id="ship_2"/>
</li>
<li class="off" id="button3">
<div class="buildingimg"></div>
<input id="ship_3"/>
</li>
</form>
<a id="continue" class="off" href="" onClick="trySubmit(); return false;"><span>Submit</span></a>
What i want, is to click on the link with "sendall" ID, and then click on the link with "continue" ID.
I have already tried the followings, but none of them worked. Nothing happens:
HtmlElement AllShips = webBrowser1.Document.GetElementById("sendall");
AllShips.RaiseEvent("onclick");
AllShips.InvokeMember("click");
I have also tried to put some value into the input fields, but it's not works neither:
HtmlElement Input= webBrowser1.Document.GetElementById("ship_202");
Input.Focus();
Input.InnerText = "ship_1";
It's very interesting to me, since althought it's not working when i run this without any user interaction in my C# form application with WebBrowser, BUT if i click once by myself in the WebBrowser, and run the click codes above, it works. But it's not automation right..?
Anyone experienced similar problems like this? The only difference i found between the working clicks and in this, is the in the HTML.
More:
I'm using Internet Explorer 11 FEATURE_BROWSER_EMULATION for the WebBrowser.
The page is fully loaded.
Try letting your application pause before invoking the clicks and between them, because the page may still be busy with some earlier processes.
you can use a timer control for that effect.

How do I navigate to an internal link and execute jquery function?

I´m a very new to jquery.
I´m using this jquery code fragment and it´s working fine. But I would like to navigate from anywhere on the website and still have the function work:
function showselectedbox(theselectedbox) {
$(".pageboxes").each(function (index) {
if ($(this).attr("id") == theselectedbox) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
<a id="myHeader1" href="javascript:showselectedbox('mynewboxes1');" >show this one only</a>
<div class="pageboxes" id="mynewboxes1">Div #1</div>
<a id="myHeader2" href="javascript:showselectedbox('mynewboxes2');" >show this one only</a>
<div class="pageboxes" id="mynewboxes1">Div #1</div>
... more of the same.
I also build a tabbed menu for the navigation, and would like the selected link marked.
<div id="metaltop-teal">
<ul>
<li class="first active"><a id="myHeader1" href="javascript:showonlyone('mynewboxes1');" >show this one only</a></li>
<li><a id="myHeader2" href="javascript:showonlyone('mynewboxes2');" >show this one only</a></li>...
</ul>
</div>
Is there also another way to format the url? e.g: <a href="url" ...>link to page</a>
Thanks
you should put your javascript in a .js file and then include the file in your other files:
<script src="yourfile.js" type="text/javascript"></script>
now you can refer to your javascript function freely.
Remember to include your .js-file AFTER you include jquery, or your script won't work.
EDIT:
To have code execute upon pageload, I'd use $('document').ready() This ensures that the code isn't executed until all elements of the DOM is loaded. This way, you avoid trying to manipulate elements that aren't there. This is especially important when using eventhandlers such as click(). For live() and delegate() which also are attached to elements created later, this is not so important.
Firstly you make a line:
$('document').ready(function(){
after that line, you put anything to execute when the page is loaded.
To finish this block, you write
});
And after that you put your functions etc.

Categories