rotation - How to check orientation based on css `transform: rotate(270deg)` in Cypress?

Question

I need to check the orientation of a div with Cypress.

This is the test:

cy
  .get('data-test="vertical"')
  .should('have.css', 'transform', 'translate(-100%, 0) rotate(270deg)')

The div behaviour is standard in a scenario, or it's rotated with css transform: translate(-100%, 0) rotate(270deg); in the other scenario. I need a way to check the orientation, but transform is difficult to check, because for example in Cypress test what happens is: when I expect transform: rotateX(180deg) I actually receive transform: matrix3d(1, 0, 0, 0, 0, -1, 1.22465e-16, 0, 0, -1.22465e-16, -1, 0, 0, 0, 0, 1).

I need to find a smart way to detect the orientation. Suggestions? Tips?

question from:https://stackoverflow.com/questions/65642522/how-to-check-orientation-based-on-css-transform-rotate270deg-in-cypress

Answer 1

Issue is solved like this, with the creation of a command:

const getTransformRotationAngle = (cssTransformMatrix, absoluteValue) => {
  const cssTransformMatrixIndexes = cssTransformMatrix
    .split('(')[1]
    .split(')')[0]
    .split(',')
  const cssTransformScale = Math.sqrt(
    cssTransformMatrixIndexes[0] * cssTransformMatrixIndexes[0] +
      cssTransformMatrixIndexes[1] * cssTransformMatrixIndexes[1]
  )
  const cssTransformSin = cssTransformMatrixIndexes[1] / cssTransformScale
  const cssTransformAngle = Math.round(
    Math.asin(cssTransformSin) * (180 / Math.PI)
  )
  return absoluteValue ? Math.abs(cssTransformAngle) : cssTransformAngle
}

Cypress.Commands.add('getTransformRotationAngle', getTransformRotationAngle)

and its use in the test:

cy
  .get('data-test="vertical"')
  .invoke('css', 'transform')
  .then(cssTransform => {
    cy.getTransformRotationAngle(cssTransform, true).should(
      'eq',
      90 || 270
    )
  })