0

I'm trying to run a geb test for a grails webpage. The page displays a table. The third "td" in each table row has an internal "a href" link. the test is supposed to click on that cell. the table format is something like this

<div class="panel-body no-padding" id="myTablePanel">
    <div class="table-light">
        <table class="table table-hover table-bordered table-condensed" id="myTable">
            <thead>
            <tr>
                <th class="sortableColumn header">A<i class="pull-right tablesorter-icon"></i></th>
                <th class="sortableColumn header">B<i class="pull-right tablesorter-icon"></i></th>
                <th class="sortableColumn header">C<i class="pull-right tablesorter-icon"></i></th>
                <th class="sortableColumn header">D<i class="pull-right tablesorter-icon"></i></th>
                <th class="sortableColumn header">E<i class="pull-right tablesorter-icon"></i></th>
                <th class="sortableColumn header">F<i class="pull-right tablesorter-icon"></i></th>
                <th class="sortableColumn header">G<i class="pull-right tablesorter-icon"></i></th>
            </tr>
            </thead>
            <tbody class="align-middle" id="tableBody">
            <tr id="Dashboard-Row-Template" class="tablRow" style="display:none">
                <td class="aa"></td>
                <td class="bb"></td>
                <td><a class="cc" href="https://stackoverflow.com/"></a></td>
                <td><a class="dd" href="https://stackoverflow.com/"></a></td>
                <td class="ee"></td>
                <td class="ff"></td>
                <td class="gg"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

Basically, I want to click on the third td element in the first (and only) row of the table. I have two strategies. The first is to get all of the "td" elements and to click on the third. The second is to get all the "a" elements of class "linkItem" and click on the first element of the array. To do this, I have constructed a page object

class myPage extends Page {
    static url = "..."
    static at = {
        waitFor { title.contains("...") }
    }
    static content = {
        tableHeader1 { $('th', 0).text() }
        tableCells { $("td") }
        links { $("a.linkItem") }
    }

    void clickLink() {
        links[0].click()
    }
    void clickCell() {
        tableCells[2].click()
    }
}

And the testspec

package myapp.dashboard

import geb.spock.GebSpec
import grails.testing.mixin.integration.Integration
import grails.transaction.*

import myapp.pages.DashboardPage

@Integration
@Rollback
class DashboardSpec extends GebSpec {

    def setup() {
    }

    def cleanup() {
    }

    void "navigate to Cash Rec Dashboard page"() {
        when:
        to DashboardPage

        then:
        tableHeader1 == 'AA'
        links.size() == 1
        tableCell.size() == 7
        clickLink()

    }
}

When I run this test, I get the following error:

org.openqa.selenium.ElementNotInteractableException: You may only interact with visible elements
...
Driver info: driver.version: unknown

The test passes if I remove the last line (clickLink()) so it can see the table, it correctly counts the number of cells and I can assert the text values of the "th" elements. But any attempt to click on the link in the table cell causes this error.

Based on similar questions posted on SO about this error, I suspect it may be an issue with the selenium-htmlunit-driver, but I don't understand exactly why, or how to determine the correct version to use. My build.gradle dependency looks like this:

testRuntime "org.seleniumhq.selenium:selenium-htmlunit-driver:2.35.0"
testRuntime 'net.sourceforge.htmlunit:htmlunit:2.35.0'
testCompile "org.seleniumhq.selenium:htmlunit-driver:2.35.1"

I can click on buttons, links and check text and values elsewhere on the page, but when I try to access elements in this table row, I get this error.

edit

Using the .isDisplayed() method on "td" elements returns false. When used on "th" elements, it returns true. I'm not sure why this is.

JayKay
  • 23
  • 5
  • 1
    Welcome to SO. Do you think you could evolve your question into an [MCVE](https://stackoverflow.com/help/mcve) with full code (also test) and full HTML, so I can reproduce your problem? There is a lot of information already but at least for me not enough to answer. I would like to run your code on my machine and analyse rather than speculate. BTW, I assume your real page class has the missing closing curly brace in expression `links { $("a.linkItem")`, doesn't it? – kriegaex Feb 23 '20 at 02:25
  • I believe your table is out of view for test engine when the page is loaded. Have you tried to enforcing scrolling to this element? Check for example: https://stackoverflow.com/questions/36509245/how-to-move-to-geb-page-content-that-is-not-visible-in-the-browser-window – Michal_Szulc Feb 23 '20 at 17:13
  • Thanks for the advice kriegaex and Michal_Szulc. I'm slowly going through the project attempting to get an MCVE. It may take a while, there's a lot of content to sanitize first. The table appears at the very top of the page, as far as I can tell, it is visible, even without scrolling. – JayKay Feb 23 '20 at 18:02

0 Answers0