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

Question

我试图使用testcafe (‘getStyleProperty’)在图像上测试边框，它总是返回未定义的。其他属性，如框影，工作良好。

<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

CSS中的border被认为是速记性质。这就是为什么您找不到border属性的原因。

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

  '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)