如何在 Cypress 中基于 css `transform: rotate(270deg)` 检查方向？

Question

我需要用 Cypress 检查 div 的方向。

这是测试：

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

div 行为在一个场景中是标准的，或者它在另一个场景中与 css transform: translate(-100%, 0) rotate(270deg); 轮换。我需要一种方法来检查方向，但是 transform 很难检查，因为例如在赛普拉斯测试中会发生什么：当我期望 transform: rotateX(180deg) 我实际上收到 transform: matrix3d(1, 0, 0, 0, 0, -1, 1.22465e-16, 0, 0, -1.22465e-16, -1, 0, 0, 0, 0, 1).

我需要找到一种检测方向的智能方法。建议？提示？

Answer 1

问题是这样解决的，创建命令：

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)

及其在测试中的使用：

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

如何在 Cypress 中基于 css `transform: rotate(270deg)` 检查方向？

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

rotation

orientation

e2e-testing

cypress