如何点击 fc-timegrid 插槽？cypress-automation

Question

我正在学习 cypress 并自动化网络应用程序。Web 应用程序有网格/表格，行是时间段，列是“桑拿”、“动感单车”、“瑜伽”等活动。行是上午 10 点、上午 11 点等。因此，如果您想预订上午 11 点的动感单车课程，您可以单击该行和列的交集。我已经浏览并尝试了有关网络表格的解决方案，我已经发布了我在最后尝试过的内容

这是 HTML：

<div class="fc-timegrid fc-resourceTimeGridDay-view fc-view"><table class="fc-scrollgrid  fc-scrollgrid-liquid"><thead><tr class="fc-scrollgrid-section fc-scrollgrid-section-header "><td><div class="fc-scroller-harness"><div class="fc-scroller" style="overflow: hidden scroll;"><table class="fc-col-header " style="width: 1316px;"><colgroup><col style="width: 55px;"></colgroup><tbody><tr><th class="fc-timegrid-axis"><div class="fc-timegrid-axis-frame"></div></th><th class="fc-col-header-cell fc-resource" colspan="1" data-resource-id="QXBwb2ludG1lbnRTbG90OjMwMDE=" data-date="2023-05-11"><div class="fc-scrollgrid-sync-inner"><span class="fc-col-header-cell-cushion ">Sauna</span></div></th><th class="fc-col-header-cell fc-resource" colspan="1" data-resource-id="QXBwb2ludG1lbnRTbG90OjMwMDI=" data-date="2023-05-11"><div class="fc-scrollgrid-sync-inner"><span class="fc-col-header-cell-cushion ">Spinning</span></div>

<tbody><tr class="fc-scrollgrid-section fc-scrollgrid-section-body  fc-scrollgrid-section-liquid"><td><div class="fc-scroller-harness fc-scroller-harness-liquid"><div class="fc-scroller fc-scroller-liquid-absolute" style="overflow: hidden scroll;"><div class="fc-timegrid-body" style="width: 1316px;"><div class="fc-timegrid-slots"><table class="" style="width: 1316px;"><colgroup><col style="width: 55px;"></colgroup><tbody><tr><td class="fc-timegrid-slot fc-timegrid-slot-label fc-scrollgrid-shrink" data-time="10:00:00"><div class="fc-timegrid-slot-label-frame fc-scrollgrid-shrink-frame"><div class="fc-timegrid-slot-label-cushion fc-scrollgrid-shrink-cushion">10am</div></div></td><td class="fc-timegrid-slot fc-timegrid-slot-lane " data-time="10:00:00"></td></tr>

我在线阅读了一些关于测试网络表的教程，并尝试了这个，但 cypress 找不到该元素。 cy.get('.fc-scrollgrid.fc-scrollgrid-liquid>tbody>tr:nth-child(4)>td:nth-child(4)').click();（单击第 4 行和第 4 列。我如何才能单击行和列的交叉点以便预订课程？

Answer 1

网格行是<tr>元素，列（行内）是<td>元素。

所以第 4 行是.find('tr').eq(3)因为索引是从零开始的，同样第 4 列是.find('td').eq(3)。

我认为该表是按类标识的（但最好有一个 id）

cy.get('table.fc-scrollgrid tbody')
  .find('tr').eq(3)
  .find('td').eq(3)
  .click()

怎么办？你在测试什么？您需要设计一个由操作产生的断言。