javascript - Cypress.screenshot 停电 svg 元素

Question

我正在尝试使用柏树在停电的情况下拍摄快照
阅读 an old post我试图在一般 css 中设置它

@namespace xmlns 'http://www.w3.org/2000/svg';

failed attempts

cy.screenshot(`${viewportName()} - blackout`, {
      blackout: ['svg'],
    })
// Failed

cy.screenshot(`${viewportName()} - blackout`, {
      blackout: ['svg["xmlns"]'],
    })
// Failed

cy.screenshot(`${viewportName()} - blackout`, {
      blackout: ['["xmlns"]'],
    })
// Failed

cy.screenshot(`${viewportName()} - blackout`, {
      blackout: ['[xmlns="http://www.w3.org/2000/svg"]'],
    })
// Failed

cy.screenshot(`${viewportName()} - blackout`, {
      blackout: ['svg[xmlns="http://www.w3.org/2000/svg"]'],
    })
// Failed

import * as React from 'react'

function SvgSearchCamera(props) {
  return (
    <svg
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100"
      {...props}
    >
      <defs>
        <linearGradient id="grad1" x1="0%" y1="100%" x2="100%" y2="0%">
          <stop offset="0%" style={{ stopColor: '#12c2e9', stopOpacity: 1 }} />
          <stop offset="50%" style={{ stopColor: '#c471ed', stopOpacity: 1 }} />
          <stop offset="100%" style={{ stopColor: '#f64f59', stopOpacity: 1 }} />
        </linearGradient>
      </defs>
      <path
        fill="url(#grad1)"
        // fill="currentColor"
        d="M38.988 11.031c-2.462 0-4.998 2.015-4.998 4.998v3h-1c-5.103 0-8.996 4.626-8.996 9.995v18.18C13.836 48.67 5.969 57.457 5.969 68.008c0 11.57 9.453 21.023 21.024 21.023 11.24 0 20.474-8.908 20.992-20.023h36.987c5.103 0 8.997-4.627 8.997-9.996V29.024c0-5.369-3.894-9.996-8.997-9.996H51.984V16.03c0-2.983-2.536-4.998-4.999-4.998h-7.997zm0 3.999h7.997c.445 0 1 .185 1 1v2.998H37.99V16.03c0-.814.554-1 1-1zm-5.998 7.996h51.982c2.65 0 4.998 2.507 4.998 5.998v12.995H71.79c-.97-6.207-6.337-10.996-12.809-10.996-6.471 0-11.838 4.789-12.808 10.996h-18.18V29.024c0-3.491 2.347-5.998 4.997-5.998zm46.984 1c-2.735 0-4.999 2.264-4.999 4.998 0 2.734 2.264 4.998 4.999 4.998h3.998c2.735 0 4.999-2.264 4.999-4.998 0-2.734-2.264-4.998-4.999-4.998h-3.998zm0 3.998h3.998c.589 0 1 .412 1 1 0 .588-.411 1-1 1h-3.998c-.589 0-1-.412-1-1 0-.588.411-1 1-1zM58.98 35.022a8.966 8.966 0 018.997 8.996 8.966 8.966 0 01-8.997 8.996 8.966 8.966 0 01-8.997-8.996 8.966 8.966 0 018.997-8.996zM27.992 46.017h18.181c.97 6.207 6.337 10.996 12.808 10.996 6.472 0 11.839-4.789 12.808-10.996H89.97v12.995c0 3.491-2.348 5.998-4.998 5.998H47.798c-1.419-9.84-9.698-17.522-19.806-17.993v-1zm-1 5.03a16.91 16.91 0 0116.963 16.961A16.91 16.91 0 0126.993 84.97 16.91 16.91 0 0110.03 68.008a16.91 16.91 0 0116.963-16.962zm-1.999 5.966c-4.945 0-8.997 4.051-8.997 8.996s4.052 8.997 8.997 8.997a8.91 8.91 0 004.78-1.406l4.81 4.81a2 2 0 102.812-2.842l-4.78-4.78a8.936 8.936 0 001.375-4.779c0-4.945-4.052-8.996-8.997-8.996zm0 3.998a4.968 4.968 0 014.998 4.998 4.968 4.968 0 01-4.998 4.998 4.968 4.968 0 01-4.998-4.998 4.968 4.968 0 014.998-4.998z"
      />
    </svg>
  )
}

export default SvgSearchCamera

Answer 1

你的第一次尝试是正确的。但是，似乎 Cypress 目前不支持涂黑 SVG 元素。

我尝试了您的第一种方法并逐步完成了 Cypress 代码。

cy.screenshot({ blackout: ['svg'] });

在 addBlackout() ( source )， Cypress 找到所有 SVG 元素。

在 addBlackoutForElement() ( source )， Cypress 计算每个 SVG 元素的尺寸。

在 getElementDimensions() ( source )， Cypress 尝试读取 offsetWidth/offsetHeight直接关闭 SVGElement。

这些返回未定义，如 these properties are only valid for HTMLElement, not SVGElement . Cypress 做了一些数学运算，最后用 NaN 绘制了停电。宽度和高度。
Cypress 需要更改 getElementDimensions()也支持 SVG。