如何按样式查找元素？

Question

HTML：

<div class="example-event Gantt-event event_class_color Gannt-event-another-edit"
  data-object-type-id="4" data-is-people="true" data-is-taken="false" 
  data-is-externalorder="false" data-is-inaccessibility="false"
  data-work-status="1" title="SEPP-16288"
  style="width: 400px; height: 18px; left: 400px; top: 5px; line-height: 18px;
    background: repeating-linear-gradient(45deg, rgb(255, 243, 204), 
      rgb(255, 243, 204) 10px, rgb(249, 30, 26) 10px,
      rgb(249, 30, 26) 20px);">
</div>

我有一些相同的元素，但风格不同。Cypress 有没有办法按样式选择元素，但版本比以下更短：

cy.get('[style="width: 400px; height: 18px; left: 400px; top: 5px; line-height: 18px; 
  background: repeating-linear-gradient(
   45deg, 
   rgb(255, 243, 204), 
   rgb(255, 243, 204) 10px, 
   rgb(249, 30, 26) 10px, 
   rgb(249, 30, 26) 20px
  );"]'
)

例如仅使用背景颜色或高度？

Answer 1

我认为使用title这是用户将事件悬停在甘特图上时看到的内容。

cy.get('[title="SEPP-16288"]')

Answer 2

您可以像这样使用*with来执行包含搜索。cy.get('[style=cy.get('[style*=

cy.get('[style*="background: repeating-linear-gradient(45deg, rgb(255, 243, 204)"]')

话虽如此，在执行这样的选择器之前，我会尝试其他方法来定位您的元素。您是否尝试过以父元素为目标并执行within( ($el) => {}). 通过这种方式，您可以将可以找到的元素限制为有限数量的元素，通常允许您使用更详细的选择器。