Question

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

我遇到的问题是了解如何“提取”文本（即日期），然后在对页面进行更改后比较它以说它是不同的。这是我要测试的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-触发刷新

我有一个按钮可以单击，但是可能您需要在其他页面上键入一些文本，在这种情况下，此步骤将是多行。

如何使用赛普拉斯提取并检查日期更改？

1 个答案:

＃1-解析文本

＃3-等待刷新

＃4-触发刷新