为什么赛普拉斯没有找到我的H1元素？

Question

我有一些针对网站的端到端测试，使用Cypress.io v3.2.0在Javascript中实现。我的一个测试步骤是这样实现的：

cy.get('h1#feed_header_id').contains('אביזרי');  //('אביזרי' is in Hebrew)

当我在赛普拉斯GUI中运行测试时，它在CONTAINS步骤中失败。但是当我点击日志中的CONTAINS步骤时，快照清楚地显示了H1元素，其中包含文本“אביזרי”。

屏幕截图：

请注意：元素是：<h1 id="feed_header_id">אביזרי רכב</h1>并且是页面中唯一具有此id的元素。

当元素和文本清晰可见时，为什么赛普拉斯无法在元素中找到文本？

Answer 1

您可能有多个具有相同文本的元素。试试cy.get('#feed_header_id').find('h1').contains('אביזרי');

Answer 2

我强烈怀疑责任在于测试工具。

有些测试工具存在RTL语言问题，它们会颠倒字母的顺序。更糟糕的是，如果字符串中有拉丁文或数字或标点符号，它也会转换字符串。

我建议尝试：

cy.get('h1#feed_header_id').contains('ירזיבא');

Answer 3

您可以使用备用'包含'命令，

cy.contains('#feed_header_id', 'אביזרי');

原因是cy.get(...).contains(...)不等待异步内容。

get()部分有自动重试，但id选择器在你的html中是硬编码的，所以get()立即成功（在xhr返回它的值之前），然后测试元素的内容（最初是空的）。

上面的替代语法将自动重试应用于选择器和内容。

这是我用来确保它不是由于RTL语言功能的快速测试。

Spec - contains-rtl.js

describe('contains', () => {
  it('waits for content', () => {
    cy.visit('app/hebrew-calendar.html').then(x => console.log('x', x))
    // cy.get('h1#feed_header_id').contains('כ״ט בְּאִיָּר תשע״א');
    cy.contains('h1#feed_header_id', 'כ״ט בְּאִיָּר תשע״א');
  })
})

示例页面 - hebrew-calendar.html

<h1 id="feed_header_id"></h1>

<script>
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://www.hebcal.com/converter/?cfg=json&gy=2011&gm=6&gd=2&g2h=1', true);

  xhr.onload = function () {
    const hebrewDate = JSON.parse(xhr.response).hebrew;
    const el = document.querySelector('h1#feed_header_id');
    el.textContent = hebrewDate;
  };

  xhr.send(null);
</script>