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

Question

我正在尝试使用 testcafe 使用 getStyleProperty('border') 测试图像上的边框，它总是 returns 未定义。其他属性如 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 in CSS is considered a Shorthand property。这就是为什么你找不到 border 属性.

的原因

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

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

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

TestCafe: testing border property of element using testcafe

css

testing

automated-tests

border

testcafe

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

TestCafe: testing border property of element using testcafe

css

testing

automated-tests

border

testcafe

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