Question

有没有一种方法可以用Cypress在元素之前测试伪CSS类的content？

我看到了链接记录：

但是我没有使用::before伪类为CSS类找到任何东西。

想象一下代码：

.myClass:before {
  content: "foo-";
}

<div>
  <span class="myClass">Bar</span>
</div>

如何测试“ foo-”的存在？

Answer 1

有一种方法可以对伪元素的CSS属性进行断言，尽管它并不像使用Cypress命令那样简单。

使用#! /usr/bin/perl use strict; use warnings; use LWP::UserAgent; my $username = 'abcdef'; my $password = 'sekr!t'; my $base_url = 'https://gitlab.one.com/'; my $signin_url = $base_url.'users/sign_in'; my $ua = LWP::UserAgent->new(); $ua->ssl_opts(verify_hostname => 0, SSL_verify_mode => 0x00); my $response = $ua->get($signin_url); unless ($response->is_success) { die "Error getting $signin_url: ".$response->status_line; } my $content = $response->decoded_content; my $c = 0; my $authenticity_token = ''; LINE: for my $line (split /\n/,$content) { if ($line =~ m/<input type="hidden" name="authenticity_token" value="([^"]+)" \/>/) { $authenticity_token = $1; print "Authenticity_token is: $authenticity_token ?\n"; # There are two lines containing an authentiticity token, take he first last LINE; } } my $data = { 'authenticity_token' => $authenticity_token, 'utf8' => '✓', 'user[login]' => $username, 'user[password]' => $password, 'user[remember_me]' => 0, }; my %headers = ( 'Host' => 'gitlab.one.com', 'X-CSRF-Token' => $authenticity_token, ); $response = $ua->post($signin_url, $data, %headers); unless ($response->is_success) { die "Error getting $signin_url: ".$response->status_line; } $content = $response->decoded_content; for my $line (split /\n/, $content) { print $line; }获取对该元素的引用。
从元素上读取cy.get()对象，然后调用Window.getComputedStyle(), which can read the computed CSS of pseudo selectors.
在返回的CSS声明上使用getPropertyValue来读取Window属性的值。
声明。

这是一个处理OP中发布的代码的示例：

content

Answer 2

基于Zach's answer，我创建了一个返回伪元素属性（不带单引号）的命令。

function unquote(str) {
    return str.replace(/(^")|("$)/g, '');
}

Cypress.Commands.add(
    'before',
    {
        prevSubject: 'element',
    },
    (el, property) => {
        const win = el[0].ownerDocument.defaultView;
        const before = win.getComputedStyle(el[0], 'before');
        return unquote(before.getPropertyValue(property));
    },
);

您将像这样使用它

it('color is black', () => {
    cy.get('button')
       .before('color')
       .should('eq', 'rgb(0,0,0)'); // Or .then()
});

Answer 3

尝试声明父文本：

cy.get('.myClass').parent().should('have.text', 'foo-bar')

如果这不起作用，则可能必须使用textContent属性：

cy.get('.myClass').parent(). should($el => expect ($el).to.contain('foo-bar')
)

Answer 4

这是我的解决方案，用于获取，转换和比较十六进制的background-color与返回的rgb。

const RGBToHex = (rgbColor) => {
  // it parse rgb(255, 13, 200) to #fa92D4
  const [red, green, blue] = rgbColor.replace(/[a-z]|\(|\)|\s/g, '').split(',');
  let r = parseInt(red, 10).toString(16);
  let g = parseInt(green, 10).toString(16);
  let b = parseInt(blue, 10).toString(16);

  if (r.length === 1) r = `0${r}`;
  if (g.length === 1) g = `0${g}`;
  if (b.length === 1) b = `0${b}`;

  return `#${r}${g}${b}`;
};


cy.get('.element').then(($el) => {
  const win = $el[0].ownerDocument.defaultView;
  const before = win.getComputedStyle($el[0], 'before');
  const bgColor = before.getPropertyValue('background-color');
  expect(RGBToHex(bgColor)).to.eq('#HEXA');
});

赛普拉斯测试伪CSS类：之前

4 个答案: