bbrown25 has asked for the wisdom of the Perl Monks concerning the following question:

Hi monks, I've tried everything to click on a div, any div in this page. I've managed to find them but when I click on them, it hangs indefinitely. I print the length because I wanted to see if I counted correctly, and it does find them just fine. I just can't click. :( thanks in advance. 
my @divs = $pf_mech->xpath('//div[@class="col-superbill-id"]');
my $len = scalar @divs;
print "$len\n";
sleep(1);

$pf_mech->click(xpath => '//div[@class="col-superbill-id"]', synchroni
+ze => 0 );

[download]
I've also tried the below to no avail. 
$pf_mech->click(shift(@divs), synchronize => 0 );

[download]

Replies are listed 'Best First'.
Re: WWW::Mechanize::Firefox clicking on a div doesn't work
by Loops (Curate) on Oct 20, 2014 at 06:15 UTC

    The last line you tried should work if you wrap it inside of a hash -- assuming there is an event that is triggered by clicking the div you've selected. The WWW::Mechanize::Firefox documentation mentions that you have to use the hash along with the 'dom' key. The example below adds a custom event to ensure that there is an event tied to clicking of the div:

    use strict;
use warnings;
use diagnostics;
use feature 'say';

use WWW::Mechanize::Firefox;
my $mech = WWW::Mechanize::Firefox->new( autodie => 1 );

# Load up google search
$mech->autoclose_tab(0);
$mech->get('http://google.ca');
say "Google retrieved" if $mech->success();

# Make sure the bottom line turns red if we successfully click the <di
+v>
my $str = "
        var tmp = document.getElementById('prm-pt');
        tmp.onclick = function() {
            this.style.backgroundColor = 'red';
        };
";
$mech->eval_in_page( $str );
say "Event set" if $mech->success();

# Type something in the search box
$mech->form_id( 'tsf' );
$mech->set_fields( q => 'time' );

# Click the div, the bottom line should turn red
my @divs = $mech->xpath('//div[@id="prm-pt"]');
$mech->click( { dom => $divs[0], synchronize => 0 } );
say "<div> clicked" if $mech->success();

    [download]

    Now that I think of it, all that was missing from your first example (with 'xpath' key) was having the parameters wrapped inside of curly brackets {}. Without them, the synchronize key is ignored, and resulted in an infinite wait.

[reply]
[d/l]

      Good eye! The {} was it.

      However, although I'm "clicking" on the div now, I'm not getting the result from the browser at all. I'm suspecting that this is a javascript function I need to try and find. But how to do that?

      $pf_mech->eval_in_page('metamorph-392-start()');

      doesnt't work. I get

      MozRepl::RemoteObject: ReferenceError: metamorph is not defined at ./download_hl7.pl line 67.

      I've posted the first part of the html below, for privacy reasons I've had to omit large chunks after that first div but hopefully there is enough here to figure out how to get this click to happen. NB I am following the above example and clicking on the div as present in the DOM.

      <html class="js flexbox canvas canvastext webgl no-touch geolocation p
+ostmessage no-websqldatabase indexeddb hashchange history draganddrop
+ websockets rgba hsla multiplebgs backgroundsize borderimage borderra
+dius boxshadow textshadow opacity cssanimations csscolumns cssgradien
+ts no-cssreflections csstransforms csstransforms3d csstransitions fon
+tface generatedcontent video audio localstorage sessionstorage webwor
+kers applicationcache svg inlinesvg smil svgclippaths k-ff k-ff33" la
+ng="en">
<head>
<body onfocus="setFocus(true)" onblur="setFocus(true)" scroll="no" sty
+le="">
<script src="jslibs/extMouseWheel.js" type="text/javascript">
<script src="jslibs/PF_BrowserDetect.js" type="text/javascript">
<script src="jslibs/PF_BrowserWarnings.js" type="text/javascript">
<script src="jslibs/PF_AdManager.js" type="text/javascript">
<script type="text/javascript">
<div id="browser-error" style="display: none;">
<script type="text/javascript">
<div id="divFlexCredentials" class="div" style="height:1px; width:1px;
+ position:fixed; top: 0px;">
<div id="divFlexEHR" class="div" style="height: 100%; width: 100%; pos
+ition: fixed; top: 0px; background: none repeat scroll 0% 0% transpar
+ent; display: none;">
<div id="hiddenFrame" style="position:absolute;background-color:transp
+arent;border:0px;visibility:hidden;"></div>
<script type="text/javascript">
<div id="embermain" class="ember-application">
<div id="clinical"> </div>
<div id="ember553" class="ember-view">
<script id="metamorph-1-start" type="text/x-placeholder">
<div id="ember4172" class="ember-view application navigation ad-aware"
+>
<script id="metamorph-28-start" type="text/x-placeholder">
</script>
<div class="left-nav">
<script id="metamorph-29-start" type="text/x-placeholder">
<ul class="menu-list" data-bindattr-12="12">
<script id="metamorph-29-end" type="text/x-placeholder">
<script id="metamorph-95-start" type="text/x-placeholder">
<script id="metamorph-95-end" type="text/x-placeholder">
<script id="metamorph-96-start" type="text/x-placeholder">
<script id="metamorph-96-end" type="text/x-placeholder">
</div>
<script id="metamorph-97-start" type="text/x-placeholder">
<div class="navigation-header">
<script id="metamorph-102-start" type="text/x-placeholder">
<script id="metamorph-102-end" type="text/x-placeholder">
<script id="metamorph-97-end" type="text/x-placeholder">
<script id="metamorph-28-end" type="text/x-placeholder">
<div class="pf outlet" data-bindattr-16="16" style="height: 743px;">
<div class="pd-modal">
<script id="metamorph-103-start" type="text/x-placeholder">
<script id="metamorph-103-end" type="text/x-placeholder">
<script id="metamorph-104-start" type="text/x-placeholder">
<script id="metamorph-339-start" type="text/x-placeholder">
<script id="metamorph-341-start" type="text/x-placeholder">
<script id="metamorph-340-start" type="text/x-placeholder">
<script id="metamorph-342-start" type="text/x-placeholder">
<div class="left-nav">
<script id="metamorph-342-end" type="text/x-placeholder">
<div class="billing.reports outlet" data-bindattr-85="85">
<script id="metamorph-369-start" type="text/x-placeholder">
<div id="ember4940" class="ember-view">
<div class="container-fluid superbill-report">
<script id="metamorph-370-start" type="text/x-placeholder">
<div class="ad-header clearfix">
<script id="metamorph-370-end" type="text/x-placeholder">
<div class="row superbill-navigation-bar">
<div id="ember5061" class="ember-view">
<div class="superbill-report-kendo-grid">
<div class="spinner-overlay" style="height: 29px; display: none;"></di
+v>
<div id="ember5064" class="ember-view superbill-report-grid" style="">
<div class="kendo-grid-container k-grid k-widget k-reorderable" data-r
+ole="grid" style="">
<div class="k-grid-header" style="padding-right: 0px;">
<div class="k-grid-content" style="max-height: 473px;">
<table class="k-selectable" role="grid" tabindex="0" data-role="select
+able" aria-activedescendant="aria_active_cell">
<colgroup>
<tbody role="rowgroup">
<tr class="" role="row" data-uid="cfec809b-e27c-4e5a-a59f-c66c6570fdcc
+" aria-selected="false">
<td id="aria_active_cell" class="" role="gridcell">
<div class="col-superbill-id" data-element="table-rows">
<script id="metamorph-392-start" type="text/x-placeholder">
4C-663-HKXEWHA-E1
<script id="metamorph-392-end" type="text/x-placeholder">
</div>
</td>

      [download]
[reply]
[d/l]
[select]

        Hi there,

        We're venturing into non Perl territory here. What you're seeing are Javascript errors, and really not on topic here. There are other sites to choose from.

        Briefly, you're trying to evaluate an html id, the value of which isn't valid javascript.

        Good luck.

[reply]

Back to Seekers of Perl Wisdom