条件测试

Question

在我的测试中，我想根据当前壁纸更改背景。为此，我使用条件测试：

it("change the wallpaper", () => {
  if (wallpaperPage.backgroundImage().should('have.css', 'background', 'rgb(38, 167, 223) url("https://url.com/ck/img/common/wallpapers/wallpaper_1.png") repeat scroll 0% 0% / 120px padding-box border-box')) {
    wallpaperPage.purpleColorButton().click({force: true});
    wallpaperPage.cloudsButton().click({force: true});
    wallpaperPage.backgroundImage().should('have.css', 'background-color', 'rgb(143, 40, 140)');
    wallpaperPage.backgroundImage().should('have.css', 'background-image', 'url("https://url.com/ck/img/common/wallpapers/wallpaper_2.png")');
  
  } else {
    wallpaperPage.blueColorButton().click({force: true});
    wallpaperPage.watermelonsButton().click({force: true});
    wallpaperPage.backgroundImage().should('have.css', 'background-color', 'rgb(38, 167, 223)');
    wallpaperPage.backgroundImage().should('have.css', 'background-image', 'url("https://url.com/ck/img/common/wallpapers/wallpaper_1.png")');
  }
})

我要检查的背景元素的html代码：

<div data-v-6dfe149e="" class="wallpaper-background screen__preview" style="background-size: 120px; background-image: url("https://url.com/ck/img/common/wallpapers/wallpaper_2.png"); background-color: rgb(143, 40, 140);"></div>

代码的问题在于它仅适用于“真实”语句。否则，当“if”条件为假时，测试失败。我想这是因为有一个“应该”断言，但我不知道如何摆脱它并在没有它的情况下检查“have.css”。有什么想法吗？

Answer 1

首先，您需要提取“背景”值进行比较。在下面的 sn-p 中，$el 是一个 jquery（cypress 自动包含 jquery）实例，用于获取 'background' 值。

it("change the wallpaper", () => {
  wallpaperPage.backgroundImage().then($el => {
    const background = $el.css('background');
    if (background === 'rgb(38, 167, 223) url("https://url.com/ck/img/common/wallpapers/wallpaper_1.png") repeat scroll 0% 0% / 120px padding-box border-box') {
      wallpaperPage.purpleColorButton().click({force: true});
      wallpaperPage.cloudsButton().click({force: true});
      wallpaperPage.backgroundImage().should('have.css', 'background-color', 'rgb(143, 40, 140)');
      wallpaperPage.backgroundImage().should('have.css', 'background-image', 'url("https://url.com/ck/img/common/wallpapers/wallpaper_2.png")');
    } else {
      wallpaperPage.blueColorButton().click({force: true});
      wallpaperPage.watermelonsButton().click({force: true});
      wallpaperPage.backgroundImage().should('have.css', 'background-color', 'rgb(38, 167, 223)');
      wallpaperPage.backgroundImage().should('have.css', 'background-image', 'url("https://url.com/ck/img/common/wallpapers/wallpaper_1.png")');
    }
  });
})