英文:
how to click on a fc-timegrid slot ?cypress-automation
问题
I am learning cypress and automating a web application. The web application has grids/tables, the rows are timeslots and the columns are activities like "Sauna", "Spinning", "Yoga" etc. The rows are 10am, 11am etc So if you want to book a Spinning class at 11am, you would click on the intersection of that row and column.
I have looked through and tried out solutions given about web tables, I have posted what I have tried towards the end.
here is the 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>
</th>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</thead>
<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>
</tbody>
</table>
</div>
I read several tutorials online about testing web tables, and tried out this but cypress cannot find the element.
cy.get('.fc-scrollgrid.fc-scrollgrid-liquid>tbody>tr:nth-child(4)>td:nth-child(4)').click();
(clicking 4th row and 4th column.
How can I go about clicking on the intersection of the row and the column so that I can book a class?
英文:
I am learning cypress and automating a web application. The web application has grids/tables, the rows are timeslots and the columns are activities like "Sauna", "Spinning", "Yoga" etc. The rows are 10am, 11am etc So if you want to book a Spinning class at 11am, you would click on the intersection of that row and column.I have looked through and tried out solutions given about web tables, I have posted what I have tried towards the end
here is the 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>
I read several tutorials online about testing web tables, and tried out this but cypress cannot find the element.
cy.get('.fc-scrollgrid.fc-scrollgrid-liquid>tbody>tr:nth-child(4)>td:nth-child(4)').click(); (clicking 4rth row and 4rth column.
How can I go about clicking on the intersection of the row and the column so that I can book a class?
答案1
得分: 5
网格行是<tr>元素，列（在行内）是<td>元素。
所以第四行是.find('tr').eq(3)，因为索引是从零开始的，同样第四列是.find('td').eq(3)。
我假设表格是通过类来识别的（但最好使用一个id）。
cy.get('table.fc-scrollgrid tbody')
.find('tr').eq(3)
.find('td').eq(3)
.click()
现在呢？你在测试什么？你需要设计一个断言来验证从这个操作中得到的结果。
英文:
Grid rows are the <tr> element, columns (within row) are <td> elements.
So 4th row is .find('tr').eq(3) since indexes are zero-based, and similarly 4th column is .find('td').eq(3).
The table I suppose is identified by class (but it would be better to have an id)
cy.get('table.fc-scrollgrid tbody')
.find('tr').eq(3)
.find('td').eq(3)
.click()
Now what? What are you testing? You need to devise an assertion that results from the action.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论