使用 Cypress 在表格组件中滚动

Question

我正在利用 SAP Hybris 内部的 Cypress 进行一些自动化测试。基本上，我正处于以表格形式给出促销列表的部分。 Cypress 必须管理的任务是找到包含 4 个值的行（在 4 列中给出），通过该行可以得出结论，这是一个独特的促销，之后应该单击它。

因此，例如，同一促销活动有多个变体（更新多次），具有相同的名称、代码和环境值，但只有一个变体具有“已发布”状态，这使其独一无二。

我当前使用的代码是这个：

// Find and click on the promotion row that matches all criteria
         cy.get('tr.yw-coll-browser-hyperlink').each(($row) => {
          cy.wrap($row).within(() => {
              const promotionCode = 'CR_PMI_MGM_Godfather_Discount_01_More';
              const promotionName = 'MGM GODFATHER Reward';
              const websiteEnv = 'Costa Rica_Promotion_Group';
              const promotionStatus = 'Published';
  
              // Use contains to find specific elements
              cy.get('.yw-listview-cell-label.z-label').contains(promotionCode).should('exist')
                  .then(() => {
                      cy.get('.yw-listview-cell-label.z-label').contains(promotionName).should('exist')
                          .then(() => {
                              cy.get('.yw-listview-cell-label.z-label').contains(websiteEnv).should('exist')
                                  .then(() => {
                                      // Scroll horizontally to the status cell
                                      cy.get('div.z-listbox-body').should('exist').scrollTo('right', { ensureScrollable: true }).wait(500);
                                      cy.get('.yw-listview-cell-label.z-label')
                                      .contains(promotionStatus).should('be.visible')
                                      .then(($status) => {
                                          cy.log('Found status: ', $status.text());
                                          cy.wrap($row).click({ force: true });
                                      });

我遇到困难的部分是：Cypress 找到了促销代码、名称和环境（网站）值，但找不到最后一个值，因为正如您在下面的屏幕截图中看到的那样，它不在视口。因此，我认为可能的解决方案是通过在获取“已发布”值之前将表格向右滚动来解决此问题。尽管 Cypress 无法将表格向右滚动。

我相信我正在与正确的元素进行交互，并且我已经包含了

.should('exist')

命令，但在这种情况下它没有帮助。而且我不认为这个问题与时间有关。

Answer 1

Cypress 日志中出现的错误是因为

cy.get('div.z-listbox-body')

位于您用

cy.wrap($row).within(() => {}

指定的行之外。

cy.get()

括号内的任何查询

within

都只会在行内搜索，但

z-listbox-body

将在行外搜索。

要修复此问题，请指定

withinSubject

选项，请参阅 docs。

例如指定文档主体元素：

cy.get('div.z-listbox-body', {withinSubject: Cypress.$('body')[0])

您应该意识到，您实际上不需要滚动来获取隐藏的元素。只要它们存在，查询就会返回它们。

但是，如果您想对隐藏元素执行

.click()

等操作，则需要将其滚动到视图中

cy.get('.yw-listview-cell-label.z-label')
  .scrollIntoView()
  .click()

或者您可以使用强制选项

cy.get('.yw-listview-cell-label.z-label')
  .click({force: true}))