如何查看赛普拉斯测试使用的属性值？

Posted 2023-05-09

【中文标题】如何查看赛普拉斯测试使用的属性值？

【英文标题】：How can I see property value which is used by the Cypress test?

【发布时间】：2021-03-04 15:11:39

【问题描述】：

我正在研究页面https://example.cypress.io/commands/querying上显示的赛普拉斯示例：

cy.get('[data-test-id="test-example"]')
  .invoke('css', 'position')
  .should('equal', 'static')

使用 Google 开发工具我找不到位于此页面上的对应 div 元素的 css 属性 position: static。给定的 div、cypress 代码和对应的 Google Dev 信息标记为红色：

测试通过并确认该值。如何在 Google 开发工具中看到它？

【问题讨论】：

docs.cypress.io/api/commands/invoke.html - 它使用参数“position”调用 c​​ss 方法（来自 jQuery api.jquery.com/css）。

拜托，看看我的问题，你会发现它不是关于使用调用方法的，我知道它的用途。我问的是它使用的位置属性，因为谷歌开发工具没有在任何地方显示它（我的意思是位置：静态）。

不清楚您一直在寻找什么。请注意，静态无论如何都是默认位置，例如developer.mozilla.org/en-US/docs/Web/CSS/position.

您查看的是属性，而不是 样式。查看“计算”选项卡。

我到处都看过，也看过样式。这很容易 - 只需使用我提供的网址并检查自己。

【参考方案1】：

我找到了解决办法。也许它会对某人有所帮助。因此，如果您需要获取 CSS 属性并且无法在任何地方找到它，只需检查 Google 开发工具的“计算”选项卡中是否选中了“显示全部”复选框：