Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/vitest-dev/vitest. Next generation testing framework powered by Vite. vitest.dev
test testing-tools vite
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109import { beforeEach, expect, test } from 'vitest'import { page } from 'vitest/browser'
beforeEach(() => { document.head.querySelectorAll('[data-trace-fixture]').forEach(node => node.remove()) document.body.innerHTML = ''})
test('inline styles', async () => { document.body.innerHTML = '<button style="color: red">Hello</button>' await page.mark('button rendered with css')})
test('style tag css is inlined', async () => { const style = document.createElement('style') style.dataset.traceFixture = '' style.textContent = `.trace-style-tag { color: rgb(220, 38, 38); font-weight: 700;}.trace-style-tag:hover { background: rgb(253, 224, 71); color: rgb(30, 64, 175);}` document.head.append(style) document.body.innerHTML = '<button class="trace-style-tag">Hello</button>' await page.mark('button rendered with style tag css')})
test('same-origin link css is inlined', async () => { // TODO(test): wait for the stylesheet load event so this actually proves // rrweb inlined loaded CSS instead of racing the snapshot against asset load. const link = document.createElement('link') link.dataset.traceFixture = '' link.rel = 'stylesheet' link.href = '/assets/trace-style.css' document.head.append(link) document.body.innerHTML = '<button class="trace-linked-css">Hello</button>' await page.mark('button rendered with same-origin linked css')})
// TODO: capture or attach same-origin CSS subresources so replay does not depend on the original URL.test('css url resources stay as urls', async () => { const style = document.createElement('style') style.dataset.traceFixture = '' style.textContent = '.trace-bg { width: 24px; height: 24px; background: url("/assets/trace-pixel.svg") center / contain no-repeat; }' document.head.append(style) document.body.innerHTML = '<div class="trace-bg" role="img" aria-label="local css background"></div>' await page.mark('element rendered with css url resource')})
// TODO(test): this test is not meaningful for fidelity because the URL never loads; replace it with a loaded cross-origin fixture.test('external stylesheet remains url dependent', async () => { const link = document.createElement('link') link.dataset.traceFixture = '' link.rel = 'stylesheet' link.href = 'https://example.invalid/trace-external.css' document.head.append(link) document.body.innerHTML = '<button class="trace-external-css">Hello</button>' await page.mark('button rendered with external stylesheet')})
// TODO(test): this test is not meaningful for fidelity until /assets/trace-font.woff2 exists and successfully loads.test('font files remain url dependent', async () => { const style = document.createElement('style') style.dataset.traceFixture = '' style.textContent = `@font-face { font-family: "TraceFixtureFont"; src: url("/assets/trace-font.woff2") format("woff2");}.trace-font { font-family: "TraceFixtureFont", sans-serif;}` document.head.append(style) document.body.innerHTML = '<button class="trace-font">Hello</button>' await page.mark('button rendered with font-face url')})
test('snapshot-time pseudo-state styles', async () => { const link = document.createElement('link') link.dataset.traceFixture = '' link.rel = 'stylesheet' link.href = '/assets/trace-pseudo-style.css' document.head.append(link)
document.body.innerHTML = `<button class="trace-pseudo-hover">First pseudo state</button><button class="trace-pseudo-hover">Second pseudo state</button><input class="trace-pseudo-focus" aria-label="Focused pseudo state" value="Focused pseudo state"><label class="trace-pseudo-within"> Focus within target <input aria-label="Focus within pseudo state" value="Focus within pseudo state"></label>`
// ensure stylesheet is ready so rrweb can reliably snapshot await expect.element(page.getByRole('button', { name: 'First pseudo state' })) .toHaveStyle({ background: 'rgb(255, 200, 200)' })
await page.getByRole('button', { name: 'First pseudo state' }).hover() await page.getByRole('button', { name: 'Second pseudo state' }).click() await page.getByRole("textbox", { name: 'Focused pseudo state' }).fill('Test focus') await page.getByRole("textbox", { name: 'Focus within pseudo state' }).fill('Test focus within')})