css - TestCafe:使用 testcafe 测试元素的边框属性

Question

我正在尝试使用 getStyleProperty('border') 使用 testcafe 测试图像上的边框，它总是返回未定义。 box-shadow 等其他属性工作正常。

HTML:

<img id="imgEdit" class="img-editable" [src]="imageUrl" style="border: 12px 
solid rgb(0, 0, 0);" alt="editable image" />

const image = Selector('#imgEdit');
const imageBorder = await image.getStyleProperty('border');

imageBorder 始终未定义。

Answer 1

border在 CSS 中被认为是 Shorthand property .这就是您找不到 border 属性的原因。

如果您console.log(image.style)，您将看到代表 style="border: 12px 的实际 border* CSS 属性solid rgb(0, 0, 0);" 在你的 HTML 中。

  'border-bottom-color': 'rgb(0, 0, 0)',
  'border-bottom-left-radius': '0px',
  'border-bottom-right-radius': '0px',
  'border-bottom-style': 'solid',
  'border-bottom-width': '12px',
  'border-collapse': 'separate',
  'border-image-outset': '0px',
  'border-image-repeat': 'stretch',
  'border-image-slice': '100%',
  'border-image-source': 'none',
  'border-image-width': '1',
  'border-left-color': 'rgb(0, 0, 0)',
  'border-left-style': 'solid',
  'border-left-width': '12px',
  'border-right-color': 'rgb(0, 0, 0)',
  'border-right-style': 'solid',
  'border-right-width': '12px',
  'border-top-color': 'rgb(0, 0, 0)',
  'border-top-left-radius': '0px',
  'border-top-right-radius': '0px',
  'border-top-style': 'solid',
  'border-top-width': '12px',

我不确定你想测试哪个边框属性，但这里有一个工作示例

image.getStyleProperty('border-bottom-color'); 输出 rgb(0, 0, 0)