如何使用 Cypress 提取和检查日期更改？

Question

我有一个页面，其中包含一些文本，告诉我上次更新特定时间表的时间。我需要做的是获取该日期，更改日程安排，然后检查页面上的日期以查看它有 changed/updated.

我遇到的问题是理解如何"extract" 文本，即日期，然后在对页面进行更改后比较它说它是不同的。这是我要测试的 HTML 代码：

<div class="link-container last-changed" ng-if="$ctrl.lastUpdatedBy"><small>Page was last updated and by:</small><br />tony itadmin 12:09 01/17/2019</div>

我希望从上面的 HTML, "12:09 01/17/2019" 中获取，然后在我所在的页面上更改一些内容。然后，当页面刷新时，我想取时间戳是什么，然后看到它不同于“12:09 01/17/2019”

我不确定从哪里开始使用 Cypress。

Answer 1

我使用的模式如下（虽然我正在寻求改进），

it('should update last refreshed text', () => {
  cy.contains('selector-closest-to-text', 'signature text')
    .then(els => {
      const before = els[0].textContent;         // #1 parse the text
      expect(before.length).to.be.above(0);      // #2 in case text is empty
      cy.wait(1000)                              // #3 wait a second for new timestamp
      cy.get('selector-for-refresh-trigger')...  // #4 do something to refresh 
      cy.contains('selector-closest-to-text', 'signature text')
        .should('not.contain', before)           // #5 check has actually changed
        .then(els=> {
          const after = els[0].textContent;      // #6 parse again
          expect(after.length).to.be.above(0);   // #7 in case empty
          expect(before).not.to.eq(after);       // #8 compare
        })
    });
});

备注：

#1 - 解析文本

在您的情况下，仅获取日期和时间有点棘手。如果您不打算测试另一个用户是否更新了日程安排，您可以像我一样使用 textcontent，但如果您只想要日期和时间，这个表达式可能会做到

const before = els[0].textcontent.split(' ').slice(2).join(' ')

您可能想要提取的不仅仅是刷新时间，如果是这样，请在 it()

之外创建一个纯 JS 函数

const parseText = (txt) => {
  const split = txt.split(' ')
  return {
    user: split.slice(0,1),
    role: split.slice(1,1),
    timeRefreshed: split.slice(2).join(' '),
  }
}

并像这样使用它

const user = parseText(els[0].textcontent).user
const role = parseText(els[0].textcontent).role
const before = parseText(els[0].textcontent).timeRefreshed

#3 - 等待刷新

这有点粗糙，但很简单。可以通过等待文本更改来改进，should('not.contain', before) 可能就足够了。
注意 cy.clock() 在这里可能不起作用。

#4 - 触发刷新

我有一个按钮可以点击，但您可能需要输入一些文本，可能是在另一个页面上，在这种情况下，这一步将是多行。

如何使用 Cypress 提取和检查日期更改？

How do I extract and check for a date change with Cypress?

mocha.js

chai

cypress

#1 - 解析文本

#3 - 等待刷新

#4 - 触发刷新