如何将一个 Geb 模块用作另一个 Geb 模块中的内容并验证内容？答案

【问题标题】：How to use a Geb module as content in another Geb module and verify content?如何将一个 Geb 模块用作另一个 Geb 模块中的内容并验证内容？
【发布时间】：2017-06-27 11:41:19
【问题描述】：

我正在使用 Geb (1.1.1) 和 Spock (1.1-groovy-2.4) 以及 selenium 驱动程序 (2.53.1) 来测试 Angular 4 Web 应用程序。如果我有一个单页 webapp，并且我想将内容设置为模块的层次结构，我如何确保如果我导航到页面对象，它将查看模块的层次结构并验证内容？例如，如果我有以下页面类：

class HomePage extends Page {
    static url = 'home'
    static at = {
        title == 'Home Page' && mainViewModule.displayed
    }
    static content = {
        mainViewModule { module MainViewModule }
    }
}

然后 MainViewModule 是这样定义的：

class MainViewModule extends Module {
    static content = {
        mainView { $('div', class: 'main-view') }
        dashboardModule { module DashboardModule }
    }
}

然后是仪表板模块：

class DashboardModule extends Module {
    static content = {
        dashboard = { MainViewModule.find 'dashboard' }
        subModule1 = { module SubModule1 }
        subModule2 = { module SubModule2 }
    }
}

子模块通常如下所示：

class SubModuleX extends Module {
    static content = {
        ...
    }
}

如果我的测试（使用 Spock）执行以下操作：

class SomeSpec extends GebReportingSpec {
    def 'navigate to the home page'() {
        when:
        to HomePage

        then:
        at HomePage
    }
}

如何确保它验证 HomePage 类中定义的内容，以及通过模块的层次结构向下验证？我拥有代码的方式（如上所述），我可以将选择器更改为不正确的值，但它仍然没有通过测试。

由于这是一个单页应用程序，我想避免 HomePage 类过长，因此通过使用模块将页面的部分和功能分解为逻辑部分对我来说是有意义的。我更喜欢通过聚合来关联模块，而不是通过扩展更高级别（或包含）的模块来组合，它应该能够通过聚合模块的层次结构向下验证内容是有道理的，但请告诉我如果我的假设是错误的。如果我的假设有误，我应该如何处理并避免在 HomePage 类中包含所有内容？

谢谢，史蒂夫

【问题讨论】：

标签： selenium spock geb

【解决方案1】：

与其拥有庞大的模块继承链，并且让您的页面只包含一个模块，不如直接将每个模块添加到您的页面中。

然后您可以将每个模块添加到您的页面“静态”检查以确认它们已显示，但此检查不会确认模块中的所有内容都已显示。

如果您希望这样做，则需要单独检查每个元素，例如：

myModule.myButton.displayed

如果您有继承模块的模块，您最终会得到：

myModule.anotherModule.yetAnotherModule.myButton.displayed

但是，如果您的测试尝试与页面上不存在的模块内容进行交互，您的测试将失败，因此在页面“at”检查中添加大量断言似乎有点过头了。

为什么不创建您的页面，添加一些模块来拆分内容，然后创建一个快速冒烟测试来断言您关心的每个元素都存在？

否则，如果您使用“at”检查来断言页面内容，那么您运行的每个导航到页面的测试都将花费大量时间来断言所有内容都存在。

【讨论】：

【解决方案2】：

你可以这样做：

class HomePage extends Page {
    static url = 'home'
    static at = {
        title == 'Home Page' && mainViewModule.verify()
    }
    static content = {
        mainViewModule { module MainViewModule }
    }
}

然后在你的 mainViewModule 内部：

class MainViewModule extends Module {
    static content = {
        mainView { $('div', class: 'main-view') }
        dashboardModule { module DashboardModule }
    }

    def verify(){
        try{
            //assert content for this module here
            return dashboardModule.verify()
        }
        catch(GebAssertionError ae){
            return false
        }
    }
}

然后在 DashboardModule 中：

class DashboardModule extends Module {
    static content = {
        dashboard = { MainViewModule.find 'dashboard' }
        subModule1 = { module SubModule1 }
        subModule2 = { module SubModule2 }
    }
    def verify(){
        try{
            //assert content for this module here
            return subModule1.verify() && subModule2.verify()
        }
        catch(GebAssertionError ae){
            return false
        }
    }
}

我假设您可以从这里开始遵循该模式，但如果您不能，请告诉我，我会进一步解释。

【讨论】：