2

I am working on Selenium WebDriver. I need to point the mouse to an element and perform click on it and I want to use javascript here instead of Xpaths.

The javascript of that element is not a method so that I can just fire it directly. I am confused how to create a javascript so that the method when auto-executed should go to that object (I want to point to that object using its javascript only) and perform click.

Element's javascript:

javascript:setParam(paramOrderNbr, '4');
go('survey_editing.jsp','actMoveItemUp);

Please help!

Kumar

Ahsan Khurshid
  • 9,383
  • 1
  • 33
  • 51

3 Answers3

1

try this:

String cssSelector =.... //css selector of the element you want click on
JavascriptExecutor js = (JavascriptExecutor) driver;
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.append("var x = $(\'"+cssSelector+"\');");
        stringBuilder.append("x.click();");
        js.executeScript(stringBuilder.toString());

hope this works for you

eugene.polschikov
  • 7,254
  • 2
  • 31
  • 44
  • I am unable to get the correct/exact CSS of that element, else I could have also tried to use CSS selector instead of XPath and going for javascript approach. Please help. – Alok Agarwal Sep 05 '12 at 04:02
  • could you provide the whole html and point out the element you need to select? – eugene.polschikov Sep 05 '12 at 15:31
  • I am unable to post whole HTML here. It is exceeding by 3000+ characters. Instead of CSS Selector, isn't there any other option or way to get solution to my initial question? Otherwise, can you please help me how to build/create css selector path for an element by viewing its HTML? Thanks. – Alok Agarwal Sep 06 '12 at 17:13
  • any html tag often have either ID or class attribute. Also every html tag has parent and child tags. And the whole HTML actually represnted in a tree structure (see DOM model). So the idea of finding css is in the following (i give an examlpe): html body div[class="myClass1"] p[id="someId"] .... You start from the very top of your HTML and get the node you need to locate starting from the parent (html as in my example) to your final child (p tag in my example) eleemnt through the whole structure. And note: try avoid IDs of tags e.g. like j_idt12:j_idt13. – eugene.polschikov Sep 07 '12 at 11:26
  • note: I use firebug and firepath - addon to firebug to ensure i find element locators properly – eugene.polschikov Sep 07 '12 at 11:30
  • I do have firebug and firepath addons in firefox, but it doesn't provide the css selector of an element. However, let me try to create a css selector of an element. Thanks. – Alok Agarwal Sep 07 '12 at 11:59
  • Could you provide some ( 4-6) stings of HTML above and ( 4-6) stings of HTML below the element you need to locate? – eugene.polschikov Sep 07 '12 at 12:11
  • can you provide me your email id, so I can send you full HTML ? Please find some 6 times
    17 times
    – Alok Agarwal Sep 07 '12 at 16:04
  • target Element HTML is – Alok Agarwal Sep 07 '12 at 16:05
  • my email: eugene.polschikov@gmail.com – eugene.polschikov Sep 09 '12 at 09:01
  • String qdowncss = "map[name=\"edit_1\"] > area[href=\"javascript:setParam(paramOrderNbr, '1');go('survey_editing.jsp','actMoveItemDown')\"]"; JavascriptExecutor qdown = (JavascriptExecutor) loginpage; StringBuilder stringBuilderqdown = new StringBuilder(); stringBuilderqdown.append("var x = $(\'"+qdowncss+"\');"); stringBuilderqdown.append("x.click();"); qdown.executeScript(stringBuilderqdown.toString()); I could crack the css selector path for my element, but your initial suggestion didn't help me. Please check and update. – Alok Agarwal Sep 10 '12 at 08:52
  • For one element, I used "map[name='edit_1'] > area" and getting following error: SyntaxError: missing ) after argument list However, I cannot use "map[name='edit_1'] > area" for another element as it should do some other task, but I can use this: "map[name='edit_3'] > area[href*='go(actMoveItemUp)']". Please suggest why I am getting this error. Coming to your latest suggestion, I tried using the point, but I am having same problem. The main problem is that it is performing the click on the adjacent element instead of main element. – Alok Agarwal Sep 10 '12 at 18:02
  • Most likely the main problem is locating your element. Actually if we've located element improperly then we get wrong selenium interaction with localized element. I need your exact piece of html and screen of the webpage with the element to click on. You can send both to my e-mail: eugene.polschikov@gmail.com or skype me: eugene.polschikov Having sources it be easier for me to find proper css selector – eugene.polschikov Sep 10 '12 at 18:29
  • But, all my ways to locate the element are utilized like normal element, actions class, javascript executor. Not sure if there is any other option? Can I convert normal javascript to become a fireable javascript function? Or do you think any other option? – Alok Agarwal Sep 10 '12 at 18:31
  • Can I convert normal javascript to become a fireable javascript function? Or do you think any other option? - basic idea: 1) find element 2) perform any actions on it. Obviously we've got problem with the point 1. Still yet it is not very clear for me why we can not select element using ordinary css selector. Because step 1) is implemented with cssselectors or xpath (to localize element). And I haven't faced with elements which i wasn't unable to localize with css. And second point (interacting with element) we can easily do with js – eugene.polschikov Sep 10 '12 at 18:39
  • Sure, I will email you the whole HTML to your email id asap. thanks a lot. :) – Alok Agarwal Sep 10 '12 at 18:39
0

Good job. But try to modify a lil bit your css selector. Try simply map[name="edit_1"]> area But before you try to execute anuthing verify with firebug ( i use firepath, firebug addon in ffox) to verify that your css selector is correct. Then try execute the code I mentioned above. It always works.

But also is possible to try another approach. If your selenium test is connected with pointing out web element with onmousehover action handling. Then is possible to user action builder:

WebElement mnuElement;
WebElement submnuElement;
mnEle = driver.findElement(By.Id("mnEle")).click();
sbEle = driver.findElement(By.Id("sbEle")).click();

Actions builder = new Actions(driver);
// Move cursor to the Main Menu Element
builder.moveToElement(mnEle).perform();
// Giving 5 Secs for submenu to be displayed
Thread.sleep(5000L);
// Clicking on the Hidden SubMenu
driver.findElement(By.Id("sbEle")).click();

please inform as soon as you check this one.

eugene.polschikov
  • 7,254
  • 2
  • 31
  • 44
0

I've made a little investigation on your problem. And now I'ma a lil bit frustrated. Firebug is unable to locate anything which is contained in <script> tags. See the picture below enter image description here

So if we are unable of locating element using standard tree DOM model then the last assumption is left (in my opinion). I'll share only the idea I would implement if come across with your problem. Simply try to click on fixed coordinates using js.But this is considered to be bad approach. It is explained here So returning back to the js locating coordinates to click you can use this Using described part we locate x, y coordinates of the element we need to locate. And using this you can actually perform the click. Something like that:

JavascriptExecutor js = (JavascriptExecutor) driver;
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.append("x.trigger("click", [x, y]);"); //where [x,y] you've already //obtained
        js.executeScript(stringBuilder.toString());

By the way, you can get to know about advanced user actions here . I find it quite helpful in some cases.

But it still seems to me that somehow it is possbile to locate your needed element in DOM. Hope my answer helps somehow)

Community
  • 1
  • 1
eugene.polschikov
  • 7,254
  • 2
  • 31
  • 44