Click on an anchor element with child image element threw error

[mradcliffe]

Error output said to report the bug so I'm reporting it.

Given I have an anchor element similar to

<a id="unique-id" title="Some title" href="path/to/5">
  <img class="carousel-img" src="path/to/images/img.png" />
</a>

Then I should be able to call click on it using id|name|title|alt|value.

I got the following error trying I click :link using the title or id attributes on the anchor element.

      exception 'Zumba\GastonJS\Exception\BrowserError' with message 'There was an error inside the PhantomJS portion of GastonJS.
      This is probably a bug, so please report it:
      click
      ' in vendor/jcalderonzumba/gastonjs/src/Browser/BrowserBase.php:122
      Stack trace:
      #0 vendor/jcalderonzumba/gastonjs/src/Browser/BrowserBase.php(99): Zumba\GastonJS\Browser\BrowserBase->getErrorClass(Array)
      #1 vendor/jcalderonzumba/gastonjs/src/Browser/BrowserMouseEventTrait.php(17): Zumba\GastonJS\Browser\BrowserBase->command('click', 2, 1)
      #2 vendor/jcalderonzumba/mink-phantomjs-driver/src/MouseTrait.php(31): Zumba\GastonJS\Browser\Browser->click(2, 1)
      #3 vendor/behat/mink/src/Element/NodeElement.php(153): Zumba\Mink\Driver\PhantomJSDriver->click('(//html/.//a\n[....')
      #4 vendor/behat/mink/src/Element/TraversableElement.php(73): Behat\Mink\Element\NodeElement->click()

[mradcliffe]

I think a work-around would be to change the image markup to use CSS background instead.

[jcalderonzumba]

Can you provide steps to reproduce?, from the stack trace i see that this is happening with behat. Maybe is the way behat selects the "unique-id" element and sends the clic to GastonJS

[mradcliffe]

I am using angular.js as a front-end app on this page, and the element has ng-attr-id on it. I've used this before on some other anchor elements with no issues with the phantomjs driver. There images are also in a carousel.

When I have the time, I'll try to come up with a distributable/workable example that fails. Thank you for your response.

[heddn]

I'm seeing this with a fairly simple scenario. I tested with both version 1.9.8 and 2.1.1 versions of phantomjs with no difference in results. It seems timing related. I figured it is because the DOM isn't visible, so I added this to the behat test:
$this->getSession()->wait(5000, "typeof jQuery !== 'undefined' && jQuery('a').filter(function(index) { return jQuery(this).text() === \"Edit\"; })");
But that didn't fix anything. The only thing lets me avoid the scenario is $this->getSession()->wait(5000);

Where it is failing is on my call to $this->getSession()->getPage()->clickLink('Edit'); and the edit link is hidden until it is made visible.

Here's the full step that fails.

  /**
   * @When I edit :path page
   */
  public function editPage($path) {
    $this->getSession()->visit($this->locatePath($path));
    $this->assertSession()->statusCodeEquals('200');
    $this->getSession()->getPage()->pressButton('Admin Info');
    $this->getSession()->wait(5000, "typeof jQuery !== 'undefined' && jQuery('a').filter(function(index) { return jQuery(this).text() === \"Edit\"; })");
    $this->getSession()->getPage()->clickLink('Edit');
    $this->assertSession()->statusCodeEquals('200');
  }

When I edit "group-short-name/basic-page" page # FeatureContext::editPage()
There was an error inside the PhantomJS portion of GastonJS.
This is probably a bug, so please report it:
click
html.not-oldie.js body.html.not-front.logged-in.no-sidebars.page-node.page-node-3.node-type-page.og-context.og-context-node.og-context-node-1.section-group-short-name.resource-directory.admin-menu.autologout-processed section#main-content.main-content.clearfix div.main-column.clearfix div#block-workflow-revision-info-block.block.block-workflow.block-workflow-revision-info-block.clearfix (Zumba\GastonJS\Exception\BrowserError)

[jcalderonzumba]

So far i can see that PhantomJS crashes and that mostly points to a bug on PhantomJS, although @heddn has a point and seems a timing issue due to the Edit not being visible.
Having PhantomJS 1.9.8 and and 2.1.1 crashing is bad news because it seems this bug is still on PhantomJS. In any case the only solution i can think of right now is to have a workaround. It would help to have a basic HTML page and CSS so we can reproduce and go step by step to see where the crash happens in PhantomJS API calls (remember that GastonJS is just a load of code that uses PhantomJS javascript API) and send the bug to PhantomJS team because they will ask steps to reproduce.

[heddn]

Unfortunately, I'm doing this in Drupal and it is for a client site. But one place I'm able to recreate it consistently is with ckeditor loading on a page. I used to do $this->getSession()->wait(5000, "typeof CKEDITOR !== 'undefined' && typeof CKEDITOR.VERSION !== 'undefined'"); in selenium. Now it always fails.

[jcalderonzumba]

@heddn Thanks for the info, i'll try to create a full defined steps to reproduce in order to either fix gastonJS code or to post an error to PhantomJS repo.

[mortenson]

You can reproduce this problem by adding <a href="#"><div></div></a> to your page and clicking it with GastonJS. I've written a test for Drupal core, which you can find here:

Test: https://www.drupal.org/files/issues/drupal-2773791-5-test-only.patch
Issue: https://www.drupal.org/node/2773791

[jcalderonzumba]

@mortenson thanks a lot, this will help to quickly debug and see whether gastonjs needs code change or is a weird behaviour with phantomjs.

[tedbow]

@jcalderonzumba did you have any luck debugging this issue based on #19 (comment)
Thanks

[jcalderonzumba]

@tedbow No, unfortunately my current job does not allow me much free time other than weekends.
I will try to find some time for it.

[maporto]

@mradcliffe How did you solve this problem?

[mradcliffe]

I didn't solve the issue, @maporto. I have a behat.yml that can switch between browsers (including using phantom), and run tests using Chrome and Firefox.