Pular para o conteúdo principal

Opções de Método

As opções de métodos são as opções que podem ser definidas por método. Se a opção tiver a mesma chave que uma opção que foi definida durante a instanciação do plugin, esta opção de método substituirá o valor da opção do plugin.

NOTA
  • Todas as opções das Opções de Salvamento podem ser usadas para os métodos de Comparação
  • Todas as opções de comparação podem ser usadas durante a instanciação do serviço ou para cada método de verificação individual. Se uma opção de método tiver a mesma chave que uma opção que foi definida durante a instanciação do serviço, então a opção de comparação do método substituirá o valor da opção de comparação do serviço.
  • Todas as opções podem ser usadas para os contextos de aplicação abaixo, a menos que mencionado de outra forma:
    • Web
    • Aplicativo Híbrido
    • Aplicativo Nativo
  • Os exemplos abaixo são com os métodos save*, mas também podem ser usados com os métodos check*

Opções de Salvamento

disableBlinkingCursor

  • Tipo: boolean
  • Obrigatório: Não
  • Padrão: false
  • Usado com: Todos os métodos
  • Contextos de Aplicação Suportados: Web, Aplicativo Híbrido (Webview)

Ativar/Desativar o "piscar" do cursor em todos os elementos input, textarea, [contenteditable] na aplicação. Se definido como true, o cursor será definido como transparent antes de tirar uma captura de tela e redefinido quando concluído.

await browser.saveScreen(
'sample-tag',
{
disableBlinkingCursor: true
}
)

disableCSSAnimation

  • Tipo: boolean
  • Obrigatório: Não
  • Padrão: false
  • Usado com: Todos os métodos
  • Contextos de Aplicação Suportados: Web, Aplicativo Híbrido (Webview)

Ativar/Desativar todas as animações CSS na aplicação. Se definido como true, todas as animações serão desativadas antes de tirar uma captura de tela e redefinidas quando concluído

await browser.saveScreen(
'sample-tag',
{
disableCSSAnimation: true
}
)

enableLegacyScreenshotMethod

  • Tipo: boolean
  • Obrigatório: Não
  • Padrão: false
  • Usado com: Todos os métodos
  • Contextos de Aplicação Suportados: Web, Aplicativo Híbrido (Webview)

Use esta opção para voltar ao método de captura de tela "mais antigo" baseado no protocolo W3C-WebDriver. Isso pode ser útil se seus testes dependem de imagens de linha de base existentes ou se você está executando em ambientes que não suportam totalmente as capturas de tela baseadas em BiDi mais recentes. Observe que habilitar isso pode produzir capturas de tela com resolução ou qualidade ligeiramente diferentes.

await browser.saveScreen(
'sample-tag',
{
enableLegacyScreenshotMethod: true
}
)

enableLayoutTesting

  • Tipo: boolean
  • Obrigatório: Não
  • Padrão: false
  • Usado com: Todos os métodos
  • Contextos de Aplicação Suportados: Web, Aplicativo Híbrido (Webview)

Isso ocultará todo o texto em uma página para que apenas o layout seja usado para comparação. A ocultação será feita adicionando o estilo 'color': 'transparent !important' a cada elemento.

Para a saída, veja Saída de Teste.

informação

Ao usar esta flag, cada elemento que contém texto (não apenas p, h1, h2, h3, h4, h5, h6, span, a, li, mas também div|button|..) receberá esta propriedade. Não há opção para personalizar isso.

await browser.saveScreen(
'sample-tag',
{
enableLayoutTesting: true
}
)

hideScrollBars

  • Tipo: boolean
  • Obrigatório: Não
  • Padrão: true
  • Usado com: Todos os métodos
  • Contextos de Aplicação Suportados: Web, Aplicativo Híbrido (Webview)

Ocultar barra(s) de rolagem na aplicação. Se definido como true, todas as barra(s) de rolagem serão desativadas antes de tirar uma captura de tela. Isso é definido como true por padrão para evitar problemas extras.

await browser.saveScreen(
'sample-tag',
{
hideScrollBars: false
}
)

hideElements

  • Tipo: array
  • Obrigatório: Não
  • Usado com: Todos os métodos
  • Contextos de Aplicação Suportados: Web, Aplicativo Híbrido (Webview)

Este método pode ocultar 1 ou vários elementos adicionando a propriedade visibility: hidden a eles, fornecendo um array de elementos.

await browser.saveScreen(
'sample-tag',
{
hideElements: [
await $('#element-1'),
await $('#element-2'),
]
}
)

removeElements

  • Tipo: array
  • Obrigatório: Não
  • Usado com: Todos os métodos
  • Contextos de Aplicação Suportados: Web, Aplicativo Híbrido (Webview)

Este método pode remover 1 ou vários elementos adicionando a propriedade display: none a eles, fornecendo um array de elementos.

await browser.saveScreen(
'sample-tag',
{
removeElements: [
await $('#element-1'),
await $('#element-2'),
]
}
)

resizeDimensions

  • Tipo: object
  • Obrigatório: Não
  • Padrão: { top: 0, right: 0, bottom: 0, left: 0}
  • Usado com: Apenas para saveElement ou checkElement
  • Contextos de Aplicação Suportados: Web, Aplicativo Híbrido (Webview), Aplicativo Nativo

Um objeto que precisa conter uma quantidade de pixels top, right, bottom e left que precisam tornar o recorte do elemento maior.

await browser.saveElement(
'sample-tag',
{
resizeDimensions: {
top: 50,
left: 100,
right: 10,
bottom: 90,
},
}
)

userBasedFullPageScreenshot

Quando definido como true, esta opção habilita a estratégia de rolagem e costura para capturar capturas de tela de página inteira. Em vez de usar os recursos nativos de captura de tela do navegador, ele rola pela página manualmente e costura várias capturas de tela juntas. Este método é especialmente útil para páginas com conteúdo carregado preguiçosamente ou layouts complexos que exigem rolagem para renderização completa.

await browser.saveScreen(
'sample-tag',
{
userBasedFullPageScreenshot: true
}
)

fullPageScrollTimeout

  • Tipo: number
  • Obrigatório: Não
  • Padrão: 1500
  • Usado com: Apenas para saveFullPageScreen ou saveTabbablePage
  • Contextos de Aplicação Suportados: Web, Aplicativo Híbrido (Webview)

O tempo limite em milissegundos para esperar após uma rolagem. Isso pode ajudar a identificar páginas com carregamento preguiçoso.

NOTA: Isso só funciona quando userBasedFullPageScreenshot está definido como true

await browser.saveFullPageScreen(
'sample-tag',
{
fullPageScrollTimeout: 3 * 1000
}
)

hideAfterFirstScroll

Este método ocultará um ou vários elementos adicionando a propriedade visibility: hidden a eles, fornecendo um array de elementos. Isso será útil quando uma página, por exemplo, tiver elementos fixos que rolam com a página se a página for rolada, mas darão um efeito irritante quando uma captura de tela de página inteira for feita

NOTA: Isso só funciona quando userBasedFullPageScreenshot está definido como true

await browser.saveFullPageScreen(
'sample-tag',
{
hideAfterFirstScroll: [
await $('#element-1'),
await $('#element-2'),
]
}
)

waitForFontsLoaded

  • Tipo: boolean
  • Obrigatório: Não
  • Padrão: true
  • Usado com: Todos os métodos
  • Contextos de Aplicação Suportados: Web, Aplicativo Híbrido (Webview)

Fontes, incluindo fontes de terceiros, podem ser carregadas de forma síncrona ou assíncrona. O carregamento assíncrono significa que as fontes podem ser carregadas depois que o WebdriverIO determinar que uma página foi totalmente carregada. Para evitar problemas de renderização de fontes, este módulo, por padrão, aguardará que todas as fontes sejam carregadas antes de tirar uma captura de tela.

await browser.saveScreen(
'sample-tag',
{
waitForFontsLoaded: true
}
)

Opções de Comparação (Verificação)

As opções de comparação são opções que influenciam a forma como a comparação, pelo ResembleJS, é executada.

ignoreAlpha

  • Tipo: boolean
  • Padrão: false
  • Obrigatório: Não
  • Usado com: Todos os Métodos de Verificação
  • Contextos de Aplicação Suportados: Todos

Compara imagens e descarta o canal alfa.

await browser.checkScreen(
'sample-tag',
{
ignoreAlpha: true
}
)

blockOutSideBar

  • Tipo: boolean
  • Padrão: true
  • Obrigatório: Não
  • Usado com: Pode ser usado apenas para checkScreen(). Isso é apenas para iPad
  • Contextos de Aplicação Suportados: Todos

Bloqueia automaticamente a barra lateral para iPads no modo paisagem durante as comparações. Isso evita falhas no componente nativo de guia/privado/favoritos.

await browser.checkScreen(
'sample-tag',
{
blockOutSideBar: true
}
)

blockOutStatusBar

  • Tipo: boolean
  • Padrão: true
  • Obrigatório: Não
  • Usado com: Isso é apenas para Mobile
  • Contextos de Aplicação Suportados: Híbrido (parte nativa) e Aplicativos Nativos

Bloqueia automaticamente a barra de status e a barra de endereço durante as comparações. Isso evita falhas no tempo, status de Wi-Fi ou bateria.

await browser.checkScreen(
'sample-tag',
{
blockOutStatusBar: true
}
)

blockOutToolBar

  • Tipo: boolean
  • Padrão: true
  • Obrigatório: Não
  • Usado com: Isso é apenas para Mobile
  • Contextos de Aplicação Suportados: Híbrido (parte nativa) e Aplicativos Nativos

Bloqueia automaticamente a barra de ferramentas.

await browser.checkScreen(
'sample-tag',
{
blockOutToolBar: true
}
)

ignoreAntialiasing

  • Tipo: boolean
  • Padrão: false
  • Obrigatório: Não
  • Usado com: Todos os Métodos de Verificação
  • Contextos de Aplicação Suportados: Todos

Compara imagens e descarta o anti-aliasing.

await browser.checkScreen(
'sample-tag',
{
ignoreAntialiasing: true
}
)

ignoreColors

  • Tipo: boolean
  • Padrão: false
  • Obrigatório: Não
  • Usado com: Todos os Métodos de Verificação
  • Contextos de Aplicação Suportados: Todos

Mesmo que as imagens estejam em cores, a comparação comparará 2 imagens em preto e branco

await browser.checkScreen(
'sample-tag',
{
ignoreColors: true
}
)

ignoreLess

  • Tipo: boolean
  • Padrão: false
  • Obrigatório: Não
  • Usado com: Todos os Métodos de Verificação
  • Contextos de Aplicação Suportados: Todos

Compara imagens e compara com red = 16, green = 16, blue = 16, alpha = 16, minBrightness=16, maxBrightness=240

await browser.checkScreen(
'sample-tag',
{
ignoreLess: true
}
)

ignoreNothing

  • Tipo: boolean
  • Padrão: false
  • Obrigatório: Não
  • Usado com: Todos os Métodos de Verificação
  • Contextos de Aplicação Suportados: Todos

Compara imagens e compara com red = 0, green = 0, blue = 0, alpha = 0, minBrightness=0, maxBrightness=255

await browser.checkScreen(
'sample-tag',
{
ignoreNothing: true
}
)

rawMisMatchPercentage

  • Tipo: boolean
  • Padrão: false
  • Obrigatório: Não
  • Usado com: Todos os Métodos de Verificação
  • Contextos de Aplicação Suportados: Todos

Se verdadeiro, a porcentagem de retorno será como 0.12345678, o padrão é 0.12

await browser.checkScreen(
'sample-tag',
{
rawMisMatchPercentage: true
}
)

returnAllCompareData

  • Tipo: boolean
  • Padrão: false
  • Obrigatório: Não
  • Usado com: Todos os Métodos de Verificação
  • Contextos de Aplicação Suportados: Todos

Isso retornará todos os dados de comparação, não apenas a porcentagem de incompatibilidade, veja também Saída do Console

await browser.checkScreen(
'sample-tag',
{
returnAllCompareData: true
}
)

saveAboveTolerance

  • Tipo: number
  • Padrão: 0
  • Obrigatório: Não
  • Usado com: Todos os Métodos de Verificação
  • Contextos de Aplicação Suportados: Todos

Valor admissível de misMatchPercentage que impede o salvamento de imagens com diferenças

await browser.checkScreen(
'sample-tag',
{
saveAboveTolerance: 0.25
}
)

largeImageThreshold

  • Tipo: number
  • Padrão: 0
  • Obrigatório: Não
  • Usado com: Todos os Métodos de Verificação
  • Contextos de Aplicação Suportados: Todos

Comparar imagens grandes pode levar a problemas de desempenho. Ao fornecer um número para o número de pixels aqui (maior que 0), o algoritmo de comparação pula pixels quando a largura ou altura da imagem é maior que largeImageThreshold pixels.

await browser.checkScreen(
'sample-tag',
{
largeImageThreshold: 1500
}
)

scaleImagesToSameSize

  • Tipo: boolean
  • Padrão: false
  • Obrigatório: Não
  • Usado com: Todos os Métodos de Verificação
  • Contextos de Aplicação Suportados: Todos

Redimensiona 2 imagens para o mesmo tamanho antes da execução da comparação. Altamente recomendado habilitar ignoreAntialiasing e ignoreAlpha

await browser.checkScreen(
'sample-tag',
{
scaleImagesToSameSize: true
}
)

ignore

  • Tipo: array
  • Obrigatório: Não
  • Usado com: Apenas com o método checkScreen, NÃO com o método checkElement
  • Contextos de Aplicação Suportados: Aplicativo Nativo

Este método bloqueará automaticamente elementos ou uma área na tela com base em um array de elementos ou um objeto de x|y|width|height.

await browser.checkScreen(
'sample-tag',
{
ignore: [
$('~element-1'),
await $('~element-2'),
{
x: 150,
y: 250,
width: 100,
height: 100,
}
]
}
)

Opções de pasta

A pasta de linha de base e as pastas de captura de tela (atual, diff) são opções que podem ser definidas durante a instanciação do plugin ou método. Para definir as opções de pasta em um método específico, passe as opções de pasta para o objeto de opções dos métodos. Isso pode ser usado para:

  • Web
  • Aplicativo Híbrido
  • Aplicativo Nativo
import path from 'node:path'

const methodOptions = {
actualFolder: path.join(process.cwd(), 'customActual'),
baselineFolder: path.join(process.cwd(), 'customBaseline'),
diffFolder: path.join(process.cwd(), 'customDiff'),
}

// Você pode usar isso para todos os métodos
await expect(
await browser.checkFullPageScreen("checkFullPage", methodOptions)
).toEqual(0)

actualFolder

  • Tipo: string
  • Obrigatório: Não
  • Contextos de Aplicação Suportados: Todos

Pasta para a captura que foi capturada no teste.

baselineFolder

  • Tipo: string
  • Obrigatório: Não
  • Contextos de Aplicação Suportados: Todos

Pasta para a imagem de linha de base que está sendo usada para comparação.

diffFolder

  • Tipo: string
  • Obrigatório: Não
  • Contextos de Aplicação Suportados: Todos

Pasta para a diferença de imagem renderizada pelo ResembleJS.

Welcome! How can I help?

WebdriverIO AI Copilot