TestCafe: testing border property of element using testcafe

Question

I am trying to test the border on an image using testcafe using getStyleProperty('border') and it always returns undefined. Other properties like box-shadow work fine.

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 is always undefined.

Answer 1

border in CSS is considered a Shorthand property. This is the reason why you cannot find the border property.

If you console.log(image.style), you will see the actual border* CSS properties that represent the style="border: 12px solid rgb(0, 0, 0);" in your 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',

I am not sure which border property you want to test for, but here is a working example

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