我如何从任何元素中得到一个自定义的CSS变量(cypress)

hlswsv35 于 2022-12-15 发布在其他

关注(0)|答案(3)|浏览(155)

我想创建一些检查元素样式的测试。我们使用这些自定义的CSS变量。有没有办法在cypress中获得这些变量，而不是检查例如RGB（0，0，0）？
提前感谢！

css

来源：https://stackoverflow.com/questions/74785083/how-can-i-get-a-custom-css-variable-from-any-element-cypress

3条答案

按热度按时间

zc0qhyus1#

使用getComputedStyle()可以相当简单地计算css变量

Cypress.Commands.add('cssVar', (cssVarName) => {
  return cy.document().then(doc => {
    return window.getComputedStyle(doc.body).getPropertyValue(cssVarName).trim()
  })
})

cy.cssVar('--mycolor')
  .should('eq', 'yellow')

其中，例如

<html>
<head>
  <style>
    body { 
      --mycolor: yellow;
    }
    p {
      background-color: var(--mycolor);
    }
  </style>
</head>

但是Assert<p>具有--mycolor需要伪元素来将yellow评估为rgb(255, 255, 0)。

Cypress.Commands.add('hasCssVar', {prevSubject:true}, (subject, styleName, cssVarName) => {
  cy.document().then(doc => {
    const dummy = doc.createElement('span')
    dummy.style.setProperty(styleName, `var(${cssVarName})`)
    doc.body.appendChild(dummy)

    const evaluatedStyle = window.getComputedStyle(dummy).getPropertyValue(styleName).trim()
    dummy.remove()

    cy.wrap(subject)
      .then($el => window.getComputedStyle($el[0]).getPropertyValue(styleName).trim())
      .should('eq', evaluatedStyle)
  })
})

it('compares element property to CSS variable', () => {

  cy.cssVar('--mycolor').should('eq', 'yellow')

  cy.get('p').hasCssVar('background-color', '--mycolor') // passes

  cy.get('button').click()                               // change the css var color

  cy.cssVar('--mycolor').should('eq', 'red')  

  cy.get('p').hasCssVar('background-color', '--mycolor') // passes
})

复杂性并不是因为CSS变量，而是因为我们处理的颜色名称是由浏览器CSS引擎自动转换的。

完整测试页

<html>
<head>
  <style>
    body { 
      --mycolor: yellow;
    }
    p {
      background-color: var(--mycolor);
    }
  </style>
</head>
<body>

  <p>Some text, change the background from yellow to red.</p>
  <button onclick="changeColor()">Change color</button>

  <script>
    function changeColor() { 
      document.body.style.setProperty('--mycolor', 'red')
    };
  </script>
</body>
</html>

测试日志

赞(0）回复(0）举报 2022-12-15

hrysbysz2#

如果同时使用cy.should()和have.css，则可以指定要检查的CSS属性及其值。
使用图像中的一个简单示例，它看起来如下所示：

cy.get('foo')
  .should('have.css', 'min-width', '211px');

如果正在进行更复杂的检查，您可以始终将.should()作为回调运行。

cy.get('foo').should(($el) => {
  const minHeight = +($el.css('min-height').split('px')[0]);
  expect(minHeight).to.eql(40);
});

我发现自己在元素上检查了很多CSS值，并选择了一个自定义命令，允许我传入一个预期的对象并检查所有这些值。

Cypress.Commands.add('validateCss', { prevSubject: 'element' }, (subject, expected: { [key: string]: any }) => {
  Object.entries(expected).forEach(([key, value]) => {
    cy.wrap(subject).should('have.css', key, value);
  });
});

const expected = { 'min-width': '211px', 'min-height': '40px' };
cy.get('foo').validateCss(expected);

赞(0）回复(0）举报 2022-12-15

mutmk8jj3#

与浏览器元素或动态CSS的交互可以以多种方式实现，
最有用的是在.should（）的帮助下使用cy.get（）
你可以在这里找到（不过我知道你已经检查过了：））
https://docs.cypress.io/api/commands/get#Get-vs-Find
例如

cy.get('#comparison')
  .get('div')
  // finds the div.test-title outside the #comparison
  // and the div.feature inside
  .should('have.class', 'test-title')
  .and('have.class', 'feature')

赞(0）回复(0）举报 2022-12-15

我来回答

我如何从任何元素中得到一个自定义的CSS变量(cypress)

3条答案

相关问题

热门标签

最新问答