test: e2e mais rígida e .gitattributes
Zero telas sem texto no computador e no celular; atalho de teclado em até 4 Tabs e linear em até 36 com o inventário das paradas; ciclo de foco do menu com a barra de cookies; oferta e cabeçalho levando ao formulário; foco vindo de outra página; separador da faixa de clientes; contagem de pôsteres da SEV. .gitattributes com eol=lf.
This commit is contained in:
1 parent
204ebd5fa5
commit
2cd4a98c55
10 files changed
+588
-87
No files matched your search
+36
-41
@@ -1,20 +1,22 @@
|
||||
import { expect, type Page, test } from "@playwright/test";
|
||||
import { DESKTOP } from "./helpers";
|
||||
import { DESKTOP, PHONE } from "./helpers";
|
||||
|
||||
/**
|
||||
* (f) No computador, a home não tem trecho vazio: amostrada a cada ¼ de tela de rolagem, nenhuma sequência de
|
||||
* amostras sem texto cobre ½ tela ou mais de rolagem (3 amostras seguidas vazias ou mais). Uma amostra vazia
|
||||
* isolada, ou duas seguidas (menos de ½ tela), é o instante de uma troca de cena e não reprova.
|
||||
* (f) A home não tem trecho vazio, no computador (1440x900) e no celular (390x844): amostrada a cada ¼ de tela de
|
||||
* rolagem, do topo ao fim, TODA amostra tem texto visível. Tolerância zero: nem uma amostra isolada sem texto passa
|
||||
* (uma troca de cena que deixe a tela vazia por um instante, no ponto exato de uma amostra, reprova e conta como
|
||||
* defeito da vitrine, não do teste).
|
||||
* Uma amostra é "vazia" quando não há nenhum elemento de texto visível na janela. Cabeçalho, avisos, leitores de
|
||||
* tela e itens ocultos não contam (o cabeçalho fixo estaria em todas as amostras e esconderia uma tela vazia).
|
||||
*/
|
||||
|
||||
/** Passo da amostragem, em fração da altura da janela. */
|
||||
const STEP = 1 / 4;
|
||||
/** Trecho vazio (em fração da altura da janela) a partir do qual o teste reprova. */
|
||||
const MAX_EMPTY_SPAN = 1 / 2;
|
||||
|
||||
test.use({ viewport: DESKTOP });
|
||||
const VIEWPORTS = [
|
||||
{ name: "computador 1440x900", size: DESKTOP },
|
||||
{ name: "celular 390x844", size: PHONE },
|
||||
] as const;
|
||||
|
||||
interface Sample {
|
||||
top: number;
|
||||
@@ -90,38 +92,31 @@ async function sampleHome(page: Page) {
|
||||
return { samples, step, maxScroll, viewportHeight };
|
||||
}
|
||||
|
||||
/** Sequências de amostras vazias seguidas cuja rolagem (da primeira à última da sequência) chega a `minSpan`. */
|
||||
function emptyRuns(samples: Sample[], minSpan: number) {
|
||||
const runs: string[] = [];
|
||||
let start = -1;
|
||||
for (const [index, { count }] of samples.entries()) {
|
||||
if (count === 0 && start < 0) start = index;
|
||||
const endsRun = count > 0 || index === samples.length - 1;
|
||||
if (start >= 0 && endsRun) {
|
||||
const last = count === 0 ? index : index - 1;
|
||||
const span = samples[last].top - samples[start].top;
|
||||
if (span >= minSpan)
|
||||
runs.push(`${samples[start].top}px a ${samples[last].top}px`);
|
||||
start = -1;
|
||||
}
|
||||
}
|
||||
return runs;
|
||||
for (const { name, size } of VIEWPORTS) {
|
||||
test.describe(`rolagem da home, ${name}`, () => {
|
||||
test.use({ viewport: size });
|
||||
|
||||
test("amostrada a cada ¼ de tela, nenhuma posição fica sem texto visível", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/", { waitUntil: "load" });
|
||||
await page.waitForTimeout(1500);
|
||||
|
||||
const { samples, step, maxScroll, viewportHeight } =
|
||||
await sampleHome(page);
|
||||
const empty = samples
|
||||
.filter(({ count }) => count === 0)
|
||||
.map(
|
||||
({ top }) => `${top}px (${(top / viewportHeight).toFixed(2)} tela)`,
|
||||
);
|
||||
|
||||
const log = samples
|
||||
.map(({ top, count }) => `${top}px: ${count} trecho(s) de texto`)
|
||||
.join("\n");
|
||||
expect(
|
||||
empty,
|
||||
`posições sem texto visível (amostras a cada ${step}px, página de ${maxScroll}px, janela de ${viewportHeight}px):\n${log}`,
|
||||
).toEqual([]);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
test("a home, amostrada a cada ¼ de tela, não tem janela de ½ tela ou mais sem texto visível", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto("/", { waitUntil: "load" });
|
||||
await page.waitForTimeout(1500);
|
||||
|
||||
const { samples, step, maxScroll, viewportHeight } = await sampleHome(page);
|
||||
const gaps = emptyRuns(samples, viewportHeight * MAX_EMPTY_SPAN);
|
||||
|
||||
const log = samples
|
||||
.map(({ top, count }) => `${top}px: ${count} trecho(s) de texto`)
|
||||
.join("\n");
|
||||
expect(
|
||||
gaps,
|
||||
`janelas de ½ tela ou mais sem texto visível (amostras a cada ${step}px, página de ${maxScroll}px):\n${log}`,
|
||||
).toEqual([]);
|
||||
});
|
||||
Reference in new issue
Block a user