Question

我使用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 }
    }
}

然后是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类中包含所有内容？

谢谢，史蒂夫

Answer 1

我不是拥有庞大的模块继承链，而是让您的页面只包含一个模块，而是直接将每个模块添加到您的页面中。

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

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

myModule.myButton.displayed

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

myModule.anotherModule.yetAnotherModule.myButton.displayed

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

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

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

Answer 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
        }
    }
}

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

如何使用Geb模块作为另一个Geb模块中的内容并验证内容？

2 个答案: