Cypress hoverover GUI效果測試

Question

我現在開始使用 cypress 來更好、更深入地學習。 我面臨一個我無法處理的問題。 問題是某種 GUI 效果與鼠標 hover 一起使用。 將鼠標懸停在元素上時，我看不到任何信息更改為 DOM。 只有::before 和::after 單詞出現。 我想我必須用一些 javascript 技巧來解決這個問題。 不幸的是，我是 javascript 的新手，我不知道如果你能幫助我，我會很高興。 謝謝！ （我想以某種方式斷言是否顯示灰色背景和加號圖標）

一般看起來像這樣

鼠標懸停在這個灰色背景上並出現加號圖標后

你可以在這里看到元素 DOM

你可以看到鼠標懸停元素后的變化

Answer 1

您可以使用cypress-real-events插件。 要安裝使用命令：

npm i cypress-real-events

然后在你的cypress/support/e2e.{js,ts}里面，寫：

import "cypress-real-events/support";

在您的代碼中，您可以直接編寫：

cy.get("selector").realHover('mouse')
//Add assertions

注意：由於上述插件使用 Chrome DevTools 協議來模擬原生事件，因此這僅適用於基於 Chromium 的瀏覽器，因此沒有 firefox。

Answer 2

進入賽普拉斯的測試嘗試在 hover 命令之后使用方法cy.wait("time here") 。 這非常簡單，但對於視覺測試來說非常有用。

Answer 3

為了訪問元素的:before或:after ，我們必須做一點 Cypress 和 JavaScript 魔術。 這個答案主要來自這個鏈接。

cy.get('.myClass')
.then($els => {
  // get Window reference from element
  const win = $els[0].ownerDocument.defaultView
  // use getComputedStyle to read the pseudo selector
  const before = win.getComputedStyle($els[0], ':before')
  // read the value of the `content` CSS property
  const contentValue = before.getPropertyValue('content')
  
  // The above lines are just how we tell Cypress to get the `:before` value. 
  // There isn't a ton to understand outside of really diving into how elements and windows work together

  expect(content).to.equal('foo');
})

所以，使用同樣的例子，如果我們想檢查 CSS 樣式的font-size ，它看起來像這樣：

cy.get('.myClass')
.then($els => {
  const win = $els[0].ownerDocument.defaultView
  const before = win.getComputedStyle($els[0], ':before')
  const fontSize = before.getPropertyValue('font-size')
  expect(fontSize).to.equal('20');
})

這也可以應用於:after ，將($els[0], ':before')更改為($els[0], ':after') 。

Answer 4

查看您的屏幕截圖，我認為您有一個覆蓋原始事件元素的灰色疊加元素。

我可以建議的唯一代碼來自有限的信息是

cy.get('#IN-578')
  .trigger('mouseover')
  .should('not.be.visible')

疊加層的不透明度為 50%，因此您仍然可以看到事件詳細信息，但從賽普拉斯的角度來看，事件已被覆蓋，因此不會“可見”。

如果您對“鼠標懸停”沒有任何運氣，請嘗試cypress-real-events中的.realHover() 。

---

在上面的代碼之后，您應該在 DOM 中查找覆蓋元素和中間的+圖標，select 那個圖標並單擊它以執行操作。