Question

我正在尝试创建一个代表无序元素列表的geb模块。我已经看到了如何使用表格执行此操作的示例，但我很难将其转换为UL->LI元素。这是我到目前为止所做的：

class CheckoutPage extends Page {

  static content = {
    cartItemList { $(".cart_items ul") }
    cartItem { i -> module CartItem,  cartItems[i] }
    cartItems(required: false) { cartItemList.find("li.item") }
  }
}

class CartItem extends Module {
  static content = {
    thumbnail { $("img.book_cover", it) }
    itemInfo { $("div.item_info", it) }
    bookTitle { itemInfo.find("h1").find("a").text() }
  }
}

当我在我的规范中执行以下操作时：

def "add an item to the cart"() {
   when:
   to CheckoutPage, productId: "10001"

   then:
   cartItems.size() == 1
   def cartItem = cartItems(0)
   cartItem.bookTitle == "Test Book Title 001"
}

我收到以下错误：

geb.error.UnresolvablePropertyException：无法解析bookTitle 作为cartItems的内容

但是，cartItem是一个DOM元素，因为我可以这样做，它可以工作：

cartItem.find("div.item_info").find("h1").find("a").text() == "Test Book Title 001"

Answer 1

您可以查看此博文。它几乎准确地概述了您正在寻找的内容。

http://adhockery.blogspot.com/2010/11/modelling-repeating-structures-with-geb.html

浏览完博客文章后，我就为您的网页课程提供了这些内容：

class CheckoutPage extends Page {

  static content = {
    cartItemList { $(".cart_items ul") }
    cartItems(required: false) { 
      cartItemList.find("li.item").collect { item-> 
        module(CartItem, item)
      }
    }
  }
}

然后你的模块应该是这样的：

class CartItem extends Module {
  static content = {
    thumbnail { $("img.book_cover") }
    itemInfo { $("div.item_info") }
    bookTitle { itemInfo.find("h1").find("a").text() }
  }
}

Answer 2

您的代码中似乎有错误 - 您可能想说def cartItem = cartItem(0)而不是def cartItem = cartItems(0)。另外，尽量避免对局部变量和内容定义使用相同的名称（就像你对cartItem所做的那样），因为它有时会导致很难追踪的名称冲突。

您可以使用moduleList() method

简化内容定义

static content = {
    cartItemList { $(".cart_items ul") }
    cartItems { i -> moduleList CartItem, cartItemList.find("li.item"), i }
}

并在你的测试中：

then:
cartItems.size() == 1 //here you use it to retrieve the full list
def item = cartItems(0) //here you use it to retrieve a single element
item.bookTitle == "Test Book Title 001"

Answer 3

这个问题的答案是两个答案的组合。我需要这些答案才能更好地了解正在发生的事情。这是实际的解决方案：

class CheckoutPage extends Page {

  static content = {
    cartItemList { $(".cart_items ul") }
    cartItems(required: false) { module CartItem, cartItemList.find("li.item")}
  }
}

class CartItem extends Module {
  static content = {
    thumbnail { $("img.book_cover") }
    itemInfo { $("div.item_info") }
    bookTitle { itemInfo.find("h1").find("a").text() }
  }
}

测试：

def "add an item to the cart"() {
    when:
    to CheckoutPage, productId: '10001'

    then:
    cartItems.size() == 1
    def cartItem = cartItems(0)
    cartItem.bookTitle == "Test Book Title 001"
}

原因（我认为）这是有效的，因为我们正在处理个别的LI元素。不像具有多个TD元素的TR那样的容器。所以这里的上下文是LI，通过使用module而不是moduleList，我只处理单个LI元素，而不是它们的列表。 cartItems已经将LI元素包含为List。

至少，这就是我理解它的方式，它正在发挥作用。

为UL LI创建Geb模块

3 个答案: