Bỏ qua CSS cho phần tử

Percy cung cấp một cách mạnh mẽ để kiểm soát kết xuất để làm bất cứ điều gì bạn muốn -- bỏ qua các vùng, ổn định các phần tử động, v.v.

Cách của Percy để làm điều này là thứ mà chúng tôi gọi là "CSS dành riêng cho Percy", chỉ được áp dụng trong môi trường kết xuất Percy. Bạn có thể sử dụng bất kỳ CSS nào và nó sẽ chỉ được hiển thị trong môi trường hiển thị của Percy. Điều này có thể rất hữu ích để bỏ qua các vùng, ẩn các vùng tạo ra sự khác biệt về hình ảnh dương tính giả hoặc khi bạn muốn kiểm soát cụ thể hơn đối với trạng thái của các thành phần giao diện người dùng như trực quan hóa và hoạt ảnh

Tùy chọn ảnh chụp/tùy chọn SDK

Bạn có thể áp dụng CSS cụ thể của Percy trong hầu hết các SDK mà không cần chỉnh sửa các tệp CSS của trang web hoặc ứng dụng của bạn. Điều này có thể được thực hiện bằng cách chuyển tùy chọn

version: 1
snapshot:
  percy-css: | 
    iframe { 
      display: none; 
    }

JavaScript

await percySnapshot('Home page', { 
  percyCSS: `iframe { display: none; }` 
});

Bạn cũng có thể định cấu hình Percy CSS toàn cầu thông qua tệp

version: 1
snapshot:
  percy-css: | 
    iframe { 
      display: none; 
    }

YAML

version: 1
snapshot:
  percy-css: | 
    iframe { 
      display: none; 
    }

🚧Percy CSS không thay đổi tính đặc hiệu

CSS Percy được thêm vào cuối thẻ

version: 1
snapshot:
  percy-css: | 
    iframe { 
      display: none; 
    }

3 để giúp sắp xếp thứ tự, nhưng có khả năng bạn sẽ cần chỉ định rõ hơn CSS cho ứng dụng của mình (với

version: 1
snapshot:
  percy-css: | 
    iframe { 
      display: none; 
    }

4 hoặc cách khác)

Truy vấn Percy CSS @media

Bạn có thể làm như vậy bằng cách sử dụng truy vấn phương tiện 

version: 1
snapshot:
  percy-css: | 
    iframe { 
      display: none; 
    }

Ví dụ: bạn có thể có một phần tử hiển thị khác nhau mỗi lần và bạn muốn Percy bỏ qua phần tử đó. Bạn có thể sử dụng các kiểu cụ thể của Percy để đạt được điều này

Giả sử bạn muốn áp dụng một lớp 

version: 1
snapshot:
  percy-css: | 
    iframe { 
      display: none; 
    }

CSS

@media only percy {
  .hide-in-percy {
    visibility: hidden;
  }
}

Và trang của bạn sẽ có HTML như thế này

HTML

<div class="hide-in-percy">an element we know we want to ignore in visual tests</div>

Tên lớp không nhất thiết phải cụ thể theo Percy, bạn có thể đặt bất kỳ bộ chọn và quy tắc CSS thông thường nào mà bạn muốn trong truy vấn phương tiện và chúng sẽ chỉ được áp dụng khi hiển thị trong Percy

Truy vấn Percy CSS @media cho Storybook

Khi sử dụng Storybook, bạn có thể cung cấp

version: 1
snapshot:
  percy-css: | 
    iframe { 
      display: none; 
    }

version: 1
snapshot:
  percy-css: | 
    iframe { 
      display: none; 
    }

Để sử dụng truy vấn phương tiện Percy CSS với ảnh chụp nhanh Sách truyện, bạn cần sửa đổi phần đầu xem trước của Sách truyện. html để phục vụ ghi đè CSS tĩnh. Điều này là do Percy sử dụng hệ thống dựa trên kiểu nội dung để áp dụng kiểu cho tệp HTML và CSS và CSS-in-JS phá vỡ mô hình này. Xem tài liệu sách truyện để biết cách thêm thẻ đầu tùy chỉnh vào dự án của bạn. Đây là một ví dụ về đầu xem trước. html bao gồm biểu định kiểu mặc định và thêm một. kiểu dáng lớp ẩn trong percy

HTML

<link rel="stylesheet" type="text/css" href="default.css">

<style>
@media only percy {
  .hide-in-percy {
    visibility: hidden;
  }
}
</style>

Sau đó, bạn sẽ thêm thuộc tính

version: 1
snapshot:
  percy-css: | 
    iframe { 
      display: none; 
    }

<div className="hide-in-percy">
  <img src="https://i.giphy.com/bcKmIWkUMCjVm.gif" alt="Bom dia"/>
</div>

Bạn có thể xem một ví dụ đầy đủ về kỹ thuật này trong yêu cầu kéo này

Gỡ lỗi Storybook CSS cụ thể theo Percy

Có thể hữu ích khi hiển thị dự án sách truyện của bạn thành bản dựng tĩnh để gỡ lỗi mọi thay đổi. Xem tài liệu Storybook để biết chi tiết về cách thực hiện việc này. Khi bạn đã tạo phiên bản tĩnh của ứng dụng, bạn có thể xóa khối

version: 1
snapshot:
  percy-css: | 
    iframe { 
      display: none; 
    }

Đồng ý, nhưng nếu nó được thêm vào thẻ, nó sẽ phóng to nó sử dụng tương tự như chúng tôi đã làm với một số thẻ khác ngay cả khi chúng tôi có sẵn CSS

Vấn đề là, nó không phải là một phần tử HTML. Bạn đang yêu cầu một cái gì đó liên quan cụ thể đến phong cách. Do đó, nó nên đi trong CSS. Yêu cầu chính xác là một cái gì đó để tạo kiểu cho nó theo một cách nhất định trong khi để nó có thể truy cập đầy đủ trong DOM. Đó là những gì CSS làm

Và yêu cầu một phần tử mới được thêm vào trong khi thừa nhận

version: 1
snapshot:
  percy-css: | 
    iframe { 
      display: none; 
    }

Đối với tôi, có vẻ như bạn nên ủng hộ việc

version: 1
snapshot:
  percy-css: | 
    iframe { 
      display: none; 
    }

lưu ý bên lề. Đối với tôi,

version: 1
snapshot:
  percy-css: | 
    iframe { 
      display: none; 
    }

Làm cách nào để bỏ qua mã CSS?

Làm cách nào để tắt một lớp trong CSS?

Cách tốt nhất để áp dụng các quy tắc CSS cho các thành phần HTML xuất hiện trong một số trang khác nhau là gì?