是否可以验证在赛普拉斯测试的某个阶段是否没有短暂显示错误消息?

时间:2019-04-09 11:16:12

标签: cypress

我有一个需要在发送表格之前填写一些字段的应用程序。填写字段并按下“提交”按钮后,将出现一个模态,说明它将把信息发送给接收者。但是,在赛普拉斯,我还可以看到一条错误消息,提示“无法发送表格”。这几乎永远无法手动复制,因此我想赛普拉斯的速度就是揭示它的原因。但是,有时候,即使红色文字显示的时间不够长,用户也可以看到闪烁的红色文字。 表单将按原样发送,因此不会影响功能。

有什么方法可以使赛普拉斯验证在测试的特定阶段从不显示特定文本?

这是DOM的片段。错误消息在这种情况下没有显示(正常运行时,我不知道如何产生错误消息):

<div class="form-inline">
  <div class="button-wrapper">...</div>
  <div class="drCop-top-padding-section ng-hide" ng-show="model.showerror" style="">
    <dc-alert-message alert-severity="danger" class="alert-dialog-error" alert-message-id="error.failedtosend">
      <div ng-attr-id="{{alertId | uvDomIdFilter}}" class="alert alert-danger" ng-class="::{'alert-warning': alertSeverity === 'secrecy'}">
        <div class="alert-icon" ng-switch="::alertSeverity">
          <i ng-switch-when="danger" class="material-icons" style="">warning</i>
          <!---->
        </div>
        <span dynamic-label="" key="error.failedtosend" class="multiline">Could not send form. Try again later.</span>
        <ng-transclude></ng-transclude>
      </div>
    </dc-alert-message>
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

可以使用MutationObservers的魔力。截至(related issue),赛普拉斯还没有预制命令可以执行此操作。

此方法使用以下技术:

  1. 创建一个MutationObserver,如果看到特定的true,则可以将标志设置为Node
  2. 将该MutationObserver附加到正在测试的应用程序中
  3. 像往常一样运行测试
  4. 检查该标志是否尚未设置为true

示例代码:

let observedErrorMessage = false

cy.visit('index5.html')

// 1. initialize the MutationObserver with a callback
const observer = new MutationObserver((records) => {
  // this will be called for each added or removed
  // node to the DOM
  records.forEach((record) => {
    // addedNodes is a list of `Node` objects
    const { addedNodes } = record
    addedNodes.forEach(addedNode => {
      // you can use anything that works on a normal
      // HTMLElement here
      if (addedNode.className === 'error-message') {
        // we'll assert on this later
        observedErrorMessage = true
      }
    })
  })
})

// 2. hook up the MutationObserver to your app code
cy.document().then($document =>
  // $document is a reference to `window.document`
  // of the application under test
  observer.observe($document.body, {
    childList: true, // emit for add/remove nodes
    subtree: true    // emit for all nodes in tree
  })
)

// 3. run your tests here that cause the spurious
// page change
cy.wait(2000)

// 4. assert that the message has not been observed
cy.wrap().then(() => {
  // we wrap this in a callback so that
  // `observedErrorMessage` is only read after
  // the prior Cypress commands are complete
  expect(observedErrorMessage).to.be.false
})