Doğrulama API
Vitest, @testing-library/jest-dom kütüphanesinden esinlenerek geliştirilmiş, geniş bir DOM doğrulama yelpazesi sunar. Bu doğrulamalar, konumlandırıcılar (locators) ve yerleşik yeniden deneme (retry) yeteneği ile birlikte gelir.
TypeScript Desteği
TypeScript kullanıyorsanız veya expect içinde doğru tür ipuçlarına sahip olmak istiyorsanız, @vitest/browser/context'in projenizde bir yerde referans alındığından emin olun. Eğer bu paketten hiç içe aktarma yapmadıysanız, tsconfig.json dosyanızın kapsadığı herhangi bir dosyaya aşağıdaki reference yorumunu ekleyin:
/// <reference types="@vitest/browser/context" />Tarayıcıdaki testler, eşzamansız yapıları nedeniyle bazen tutarsız sonuçlar verebilir. Bu durumu önlemek ve koşul gecikse bile (örneğin bir zaman aşımı, ağ isteği veya animasyon nedeniyle) doğrulamaların başarılı olmasını sağlamak önemlidir. Bu amaçla Vitest, expect.poll ve expect.element API'leri aracılığıyla varsayılan olarak yeniden denenebilir doğrulamalar sunar:
import { expect, test } from 'vitest';
import { page } from '@vitest/browser/context';
test('hata başlığı oluşturuldu', async () => {
triggerError();
// Bu satır, herhangi bir yöntemi çağrıldığında öğeyi bulmaya çalışacak bir konumlandırıcı tanımlar.
// Bu çağrı tek başına öğenin varlığını kontrol etmez.
const banner = page.getByRole('alert', {
name: /error/i,
});
// Vitest, yerleşik yeniden deneme özelliğiyle `expect.element` sağlar.
// Bu, öğenin DOM'da var olup olmadığını ve `element.textContent` içeriğinin "Error!" değerine eşit olup olmadığını, tüm koşullar karşılanana kadar tekrar tekrar kontrol edecektir.
await expect.element(banner).toHaveTextContent('Error!');
});Testlerdeki kararsızlığı azaltmak için page.getBy* konumlandırıcılarla çalışırken her zaman expect.element kullanmanızı öneririz. expect.element'in ikinci bir parametre/seçenek kabul ettiğini unutmayın:
interface ExpectPollOptions {
// Doğrulamanın yeniden deneme aralığı (milisaniye cinsinden).
// Varsayılan değeri "expect.poll.interval" yapılandırma seçeneğidir.
interval?: number;
// Doğrulamanın yeniden deneme süresi (milisaniye cinsinden).
// Varsayılan değeri "expect.poll.timeout" yapılandırma seçeneğidir.
timeout?: number;
// Doğrulama başarısız olduğunda gösterilecek özel mesaj.
message?: string;
}TIP
expect.element, expect.poll(() => element) için bir kısaltmadır ve tamamen aynı şekilde çalışır.
toHaveTextContent ve diğer tüm doğrulamalar, yerleşik yeniden deneme mekanizması olmadan normal bir expect üzerinde hala mevcuttur:
// .textContent `'Error!'` değilse hemen başarısız olur.
expect(banner).toHaveTextContent('Error!');toBeDisabled
function toBeDisabled(): Promise<void>;Bir öğenin kullanıcı açısından devre dışı olup olmadığını kontrol etmenizi sağlar.
Öğe bir form denetimi ise ve disabled özniteliği bu öğede belirtilmişse veya öğe, disabled özniteliğine sahip bir form öğesinin alt öğesiyse eşleşme sağlanır.
Yalnızca HTML button, input, select, textarea, option, optgroup gibi yerel denetim öğelerinin "disabled" özniteliği ayarlanarak devre dışı bırakılabileceğini unutmayın. Özel bir öğe olmadığı sürece, diğer öğelerdeki "disabled" özniteliği göz ardı edilir.
<button data-testid="button" type="submit" disabled>submit</button>await expect.element(getByTestId('button')).toBeDisabled(); // ✅
await expect.element(getByTestId('button')).not.toBeDisabled(); // ❌toBeEnabled
function toBeEnabled(): Promise<void>;Bir öğenin kullanıcının bakış açısından devre dışı bırakılmadığını kontrol etmenizi sağlar.
not.toBeDisabled() gibi çalışır. Testlerinizde çift olumsuzlamadan kaçınmak için bu eşleştiriciyi kullanın.
<button data-testid="button" type="submit" disabled>submit</button>await expect.element(getByTestId('button')).toBeEnabled(); // ✅
await expect.element(getByTestId('button')).not.toBeEnabled(); // ❌toBeEmptyDOMElement
function toBeEmptyDOMElement(): Promise<void>;Bu, bir öğenin kullanıcı için görünür içeriği olup olmadığını doğrulamanızı sağlar. Yorumları göz ardı eder, ancak öğe boşluk içeriyorsa başarısız olur.
<span data-testid="not-empty"><span data-testid="empty"></span></span>
<span data-testid="with-whitespace"> </span>
<span data-testid="with-comment"><!-- comment --></span>await expect.element(getByTestId('empty')).toBeEmptyDOMElement();
await expect.element(getByTestId('not-empty')).not.toBeEmptyDOMElement();
await expect.element(getByTestId('with-whitespace')).not.toBeEmptyDOMElement();toBeInTheDocument
function toBeInTheDocument(): Promise<void>;Bir öğenin belgede mevcut olup olmadığını doğrulayın.
<svg data-testid="svg-element"></svg>await expect.element(getByTestId('svg-element')).toBeInTheDocument();
await expect.element(getByTestId('does-not-exist')).not.toBeInTheDocument();WARNING
Bu eşleştirici, ayrılmış (detached) öğeleri bulmaz. toBeInTheDocument tarafından bulunabilmesi için öğenin belgeye eklenmiş olması gerekir. Ayrılmış bir öğede arama yapmak istiyorsanız lütfen toContainElement kullanın.
toBeInvalid
function toBeInvalid(): Promise<void>;Bu, bir öğenin şu anda geçersiz olup olmadığını kontrol etmenizi sağlar.
Bir öğe, aria-invalid özniteliği boş veya "true" değeriyle varsa ya da checkValidity() sonucu false ise geçersizdir.
<input data-testid="no-aria-invalid" />
<input data-testid="aria-invalid" aria-invalid />
<input data-testid="aria-invalid-value" aria-invalid="true" />
<input data-testid="aria-invalid-false" aria-invalid="false" />
<form data-testid="valid-form">
<input />
</form>
<form data-testid="invalid-form">
<input required />
</form>await expect.element(getByTestId('no-aria-invalid')).not.toBeInvalid();
await expect.element(getByTestId('aria-invalid')).toBeInvalid();
await expect.element(getByTestId('aria-invalid-value')).toBeInvalid();
await expect.element(getByTestId('aria-invalid-false')).not.toBeInvalid();
await expect.element(getByTestId('valid-form')).not.toBeInvalid();
await expect.element(getByTestId('invalid-form')).toBeInvalid();toBeRequired
function toBeRequired(): Promise<void>;Bu, bir form öğesinin şu anda zorunlu olup olmadığını kontrol etmenizi sağlar.
Bir öğe, required veya aria-required="true" özniteliğine sahipse zorunludur.
<input data-testid="required-input" required />
<input data-testid="aria-required-input" aria-required="true" />
<input data-testid="conflicted-input" required aria-required="false" />
<input data-testid="aria-not-required-input" aria-required="false" />
<input data-testid="optional-input" />
<input data-testid="unsupported-type" type="image" required />
<select data-testid="select" required></select>
<textarea data-testid="textarea" required></textarea>
<div data-testid="supported-role" role="tree" required></div>
<div data-testid="supported-role-aria" role="tree" aria-required="true"></div>await expect.element(getByTestId('required-input')).toBeRequired();
await expect.element(getByTestId('aria-required-input')).toBeRequired();
await expect.element(getByTestId('conflicted-input')).toBeRequired();
await expect.element(getByTestId('aria-not-required-input')).not.toBeRequired();
await expect.element(getByTestId('optional-input')).not.toBeRequired();
await expect.element(getByTestId('unsupported-type')).not.toBeRequired();
await expect.element(getByTestId('select')).toBeRequired();
await expect.element(getByTestId('textarea')).toBeRequired();
await expect.element(getByTestId('supported-role')).not.toBeRequired();
await expect.element(getByTestId('supported-role-aria')).toBeRequired();toBeValid
function toBeValid(): Promise<void>;Bu, bir öğenin değerinin şu anda geçerli olup olmadığını kontrol etmenizi sağlar.
Bir öğe, aria-invalid özniteliği yoksa veya öznitelik değeri "false" ise geçerlidir. Eğer bir form öğesiyse, checkValidity() sonucu da true olmalıdır.
<input data-testid="no-aria-invalid" />
<input data-testid="aria-invalid" aria-invalid />
<input data-testid="aria-invalid-value" aria-invalid="true" />
<input data-testid="aria-invalid-false" aria-invalid="false" />
<form data-testid="valid-form">
<input />
</form>
<form data-testid="invalid-form">
<input required />
</form>await expect.element(getByTestId('no-aria-invalid')).toBeValid();
await expect.element(getByTestId('aria-invalid')).not.toBeValid();
await expect.element(getByTestId('aria-invalid-value')).not.toBeValid();
await expect.element(getByTestId('aria-invalid-false')).toBeValid();
await expect.element(getByTestId('valid-form')).toBeValid();
await expect.element(getByTestId('invalid-form')).not.toBeValid();toBeVisible
function toBeVisible(): Promise<void>;Bu, bir öğenin şu anda kullanıcıya görünür olup olmadığını kontrol etmenizi sağlar.
Öğe, boş olmayan bir sınırlayıcı kutuya sahip olduğunda ve hesaplanmış stilinde visibility:hidden bulunmadığında görünür kabul edilir.
Bu tanıma göre:
- Sıfır boyutlu öğeler görünür kabul edilmez.
display:nonestiline sahip öğeler görünür kabul edilmez.opacity:0stiline sahip öğeler görünür kabul edilir.
Listedeki en az bir öğenin görünür olduğunu kontrol etmek için locator.first() yöntemini kullanın.
// Belirli bir öğe görünür.
await expect.element(page.getByText('Welcome')).toBeVisible();
// Listedeki en az bir öğe görünür.
await expect.element(page.getByTestId('todo-item').first()).toBeVisible();
// İki öğeden en az biri görünür, muhtemelen ikisi de.
await expect
.element(
page
.getByRole('button', { name: 'Sign in' })
.or(page.getByRole('button', { name: 'Sign up' }))
.first()
)
.toBeVisible();toContainElement
function toContainElement(
element: HTMLElement | SVGElement | null
): Promise<void>;Bu, bir öğenin başka bir öğeyi alt öğe olarak içerip içermediğini doğrulamanızı sağlar.
<span data-testid="ancestor"><span data-testid="descendant"></span></span>const ancestor = getByTestId('ancestor');
const descendant = getByTestId('descendant');
const nonExistantElement = getByTestId('does-not-exist');
await expect.element(ancestor).toContainElement(descendant);
await expect.element(descendant).not.toContainElement(ancestor);
await expect.element(ancestor).not.toContainElement(nonExistantElement);toContainHTML
function toContainHTML(htmlText: string): Promise<void>;Bir HTML öğesini temsil eden bir dizenin başka bir öğede bulunup bulunmadığını doğrulayın. Dize geçerli HTML içermeli, eksik HTML içermemelidir.
<span data-testid="parent"><span data-testid="child"></span></span>// Bunlar geçerli kullanımlardır
await expect
.element(getByTestId('parent'))
.toContainHTML('<span data-testid="child"></span>');
await expect
.element(getByTestId('parent'))
.toContainHTML('<span data-testid="child" />');
await expect.element(getByTestId('parent')).not.toContainHTML('<br />');
// Bunlar çalışmaz
await expect
.element(getByTestId('parent'))
.toContainHTML('data-testid="child"');
await expect.element(getByTestId('parent')).toContainHTML('data-testid');
await expect.element(getByTestId('parent')).toContainHTML('</span>');WARNING
Büyük olasılıkla bu eşleştiriciyi kullanmanıza gerek kalmayacaktır. Uygulamanın tarayıcıda kullanıcı tarafından nasıl algılandığı açısından test yapmayı teşvik ediyoruz. Bu nedenle belirli bir DOM yapısına karşı test yapmak tavsiye edilmez.
Test edilen kodun harici bir kaynaktan elde edilen HTML'yi işlediği ve bu HTML kodunun amaçlandığı gibi kullanıldığını doğrulamak istediğiniz durumlarda faydalı olabilir.
Kontrol ettiğiniz DOM yapısını denetlemek için kullanılmamalıdır. Lütfen bunun yerine toContainElement kullanın.
toHaveAccessibleDescription
function toHaveAccessibleDescription(
description?: string | RegExp
): Promise<void>;Bu, bir öğenin beklenen erişilebilir açıklamaya sahip olduğunu doğrulamanızı sağlar.
Beklenen erişilebilir açıklamanın tam dizesini geçirebilir veya normal bir ifade ya da expect.stringContaining veya expect.stringMatching kullanarak kısmi bir eşleşme yapabilirsiniz.
<a
data-testid="link"
href="/"
aria-label="Home page"
title="A link to start over"
>Start</a
>
<a data-testid="extra-link" href="/about" aria-label="About page">About</a>
<img src="avatar.jpg" data-testid="avatar" alt="User profile pic" />
<img
src="logo.jpg"
data-testid="logo"
alt="Company logo"
aria-describedby="t1"
/>
<span id="t1" role="presentation">The logo of Our Company</span>
<img
src="logo.jpg"
data-testid="logo2"
alt="Company logo"
aria-description="The logo of Our Company"
/>await expect.element(getByTestId('link')).toHaveAccessibleDescription();
await expect
.element(getByTestId('link'))
.toHaveAccessibleDescription('A link to start over');
await expect
.element(getByTestId('link'))
.not.toHaveAccessibleDescription('Home page');
await expect
.element(getByTestId('extra-link'))
.not.toHaveAccessibleDescription();
await expect.element(getByTestId('avatar')).not.toHaveAccessibleDescription();
await expect
.element(getByTestId('logo'))
.not.toHaveAccessibleDescription('Company logo');
await expect
.element(getByTestId('logo'))
.toHaveAccessibleDescription('The logo of Our Company');
await expect
.element(getByTestId('logo2'))
.toHaveAccessibleDescription('The logo of Our Company');toHaveAccessibleErrorMessage
function toHaveAccessibleErrorMessage(message?: string | RegExp): Promise<void>;Bu, bir öğenin beklenen erişilebilir hata mesajına sahip olduğunu doğrulamanızı sağlar.
Beklenen erişilebilir hata mesajının tam dizesini geçirebilirsiniz. Alternatif olarak, normal bir ifade ya da expect.stringContaining veya expect.stringMatching kullanarak kısmi bir eşleşme gerçekleştirebilirsiniz.
<input
aria-label="Has Error"
aria-invalid="true"
aria-errormessage="error-message"
/>
<div id="error-message" role="alert">This field is invalid</div>
<input aria-label="No Error Attributes" />
<input
aria-label="Not Invalid"
aria-invalid="false"
aria-errormessage="error-message"
/>// Geçerli Hata Mesajlarına Sahip Girişler
await expect
.element(getByRole('textbox', { name: 'Has Error' }))
.toHaveAccessibleErrorMessage();
await expect
.element(getByRole('textbox', { name: 'Has Error' }))
.toHaveAccessibleErrorMessage('This field is invalid');
await expect
.element(getByRole('textbox', { name: 'Has Error' }))
.toHaveAccessibleErrorMessage(/invalid/i);
await expect
.element(getByRole('textbox', { name: 'Has Error' }))
.not.toHaveAccessibleErrorMessage('This field is absolutely correct!');
// Geçerli Hata Mesajları Olmayan Girişler
await expect
.element(getByRole('textbox', { name: 'No Error Attributes' }))
.not.toHaveAccessibleErrorMessage();
await expect
.element(getByRole('textbox', { name: 'Not Invalid' }))
.not.toHaveAccessibleErrorMessage();toHaveAccessibleName
function toHaveAccessibleName(name?: string | RegExp): Promise<void>;Bu, bir öğenin beklenen erişilebilir ada sahip olduğunu doğrulamanızı sağlar. Örneğin, form öğelerinin ve düğmelerin düzgün etiketlendiğini doğrulamak için kullanışlıdır.
Beklenen erişilebilir adın tam dizesini geçirebilir veya normal bir ifade ya da expect.stringContaining veya expect.stringMatching kullanarak kısmi bir eşleşme yapabilirsiniz.
<img data-testid="img-alt" src="" alt="Test alt" />
<img data-testid="img-empty-alt" src="" alt="" />
<svg data-testid="svg-title"><title>Test title</title></svg>
<button data-testid="button-img-alt"><img src="" alt="Test" /></button>
<p><img data-testid="img-paragraph" src="" alt="" /> Test content</p>
<button data-testid="svg-button"><svg><title>Test</title></svg></p>
<div><svg data-testid="svg-without-title"></svg></div>
<input data-testid="input-title" title="test" />await expect.element(getByTestId('img-alt')).toHaveAccessibleName('Test alt');
await expect.element(getByTestId('img-empty-alt')).not.toHaveAccessibleName();
await expect
.element(getByTestId('svg-title'))
.toHaveAccessibleName('Test title');
await expect.element(getByTestId('button-img-alt')).toHaveAccessibleName();
await expect.element(getByTestId('img-paragraph')).not.toHaveAccessibleName();
await expect.element(getByTestId('svg-button')).toHaveAccessibleName();
await expect
.element(getByTestId('svg-without-title'))
.not.toHaveAccessibleName();
await expect.element(getByTestId('input-title')).toHaveAccessibleName();toHaveAttribute
function toHaveAttribute(attribute: string, value?: unknown): Promise<void>;Bu, verilen öğenin bir özniteliğe sahip olup olmadığını kontrol etmenizi sağlar. Ayrıca isteğe bağlı olarak özniteliğin belirli bir beklenen değere sahip olup olmadığını veya expect.stringContaining veya expect.stringMatching kullanarak kısmi eşleşme sağlayıp sağlamadığını kontrol edebilirsiniz.
<button data-testid="ok-button" type="submit" disabled>ok</button>const button = getByTestId('ok-button');
await expect.element(button).toHaveAttribute('disabled');
await expect.element(button).toHaveAttribute('type', 'submit');
await expect.element(button).not.toHaveAttribute('type', 'button');
await expect
.element(button)
.toHaveAttribute('type', expect.stringContaining('sub'));
await expect
.element(button)
.toHaveAttribute('type', expect.not.stringContaining('but'));toHaveClass
function toHaveClass(
...classNames: string[],
options?: { exact: boolean }
): Promise<void>;
function toHaveClass(...classNames: (string | RegExp)[]): Promise<void>;Bu, verilen öğenin class özniteliğinde belirli sınıflara sahip olup olmadığını kontrol etmenizi sağlar. Bir öğenin herhangi bir sınıfa sahip olmadığını iddia etmiyorsanız, en az bir sınıf belirtmeniz gerekir.
Sınıf adları listesi dizeleri ve normal ifadeleri içerebilir. Normal ifadeler, hedef öğedeki her bir sınıfa karşı eşleştirilir ve class özniteliğinin tam değerine bir bütün olarak eşleştirilmez.
WARNING
Yalnızca normal ifadeler sağlandığında exact: true seçeneğini kullanamayacağınızı unutmayın.
<button data-testid="delete-button" class="btn extra btn-danger">
Delete item
</button>
<button data-testid="no-classes">No Classes</button>const deleteButton = getByTestId('delete-button');
const noClasses = getByTestId('no-classes');
await expect.element(deleteButton).toHaveClass('extra');
await expect.element(deleteButton).toHaveClass('btn-danger btn');
await expect.element(deleteButton).toHaveClass(/danger/, 'btn');
await expect.element(deleteButton).toHaveClass('btn-danger', 'btn');
await expect.element(deleteButton).not.toHaveClass('btn-link');
await expect.element(deleteButton).not.toHaveClass(/link/);
// ⚠️ regexp tek tek sınıflara karşı eşleşir, tüm classList'e değil
await expect.element(deleteButton).not.toHaveClass(/btn extra/);
// öğe TAM OLARAK belirli bir sınıf kümesine sahiptir (herhangi bir sırada)
await expect.element(deleteButton).toHaveClass('btn-danger extra btn', {
exact: true,
});
// beklenenden fazlası varsa başarısız olacaktır
await expect.element(deleteButton).not.toHaveClass('btn-danger extra', {
exact: true,
});
await expect.element(noClasses).not.toHaveClass();toHaveFocus
function toHaveFocus(): Promise<void>;Bu, bir öğenin odaklanmış olup olmadığını doğrulamanızı sağlar.
<div><input type="text" data-testid="element-to-focus" /></div>const input = page.getByTestId('element-to-focus');
input.element().focus();
await expect.element(input).toHaveFocus();
input.element().blur();
await expect.element(input).not.toHaveFocus();toHaveFormValues
function toHaveFormValues(
expectedValues: Record<string, unknown>
): Promise<void>;Bu, bir formun veya fieldset'in, her verilen ad için form denetimleri içerip içermediğini ve belirtilen değere sahip olup olmadığını kontrol etmenizi sağlar.
TIP
Bu eşleştiricinin yalnızca bir form veya bir fieldset öğesi üzerinde çağrılabileceğini vurgulamak önemlidir.
Bu, içlerindeki tüm form denetimlerini güvenilir bir şekilde almak için form ve fieldset'teki .elements özelliğinden yararlanmasını sağlar.
Bu aynı zamanda kullanıcıların birden fazla form içeren bir kapsayıcı sağlaması olasılığını da önler, böylece birbiriyle ilişkili olmayan ve hatta birbiriyle çelişebilecek form denetimlerinin karışmasını engeller.
Bu eşleştirici, form denetimi değerinin form denetimi türüne bağlı olarak nasıl elde edildiğine dair ayrıntıları soyutlar. Örneğin, <input> öğelerinin bir value özniteliği vardır, ancak <select> öğelerinin yoktur. İşte kapsanan tüm durumların bir listesi:
<input type="number">öğeleri değeri bir sayı olarak döndürür, dize olarak değil.<input type="checkbox">öğeleri:- Verilen
nameözniteliğine sahip tek bir tane varsa, bir boolean olarak ele alınır; onay kutusu işaretliysetrue, işaretli değilsefalsedöndürür. - Aynı
nameözniteliğine sahip birden fazla onay kutusu varsa, hepsi toplu olarak tek bir form denetimi olarak ele alınır ve değeri, koleksiyondaki seçili onay kutularının tüm değerlerini içeren bir dizi olarak döndürür.
- Verilen
<input type="radio">öğeleri,nameözniteliğine göre gruplandırılır ve bu tür bir grup tek bir form denetimi olarak ele alınır. Bu form denetimi, değeri, gruptaki seçili radyo düğmesininvalueözniteliğine karşılık gelen bir dize olarak döndürür.<input type="text">öğeleri değeri bir dize olarak döndürür. Bu, yukarıdaki farklı kurallarda açıkça belirtilmeyen diğer olasıtypeözniteliğine sahip<input>öğeleri için de geçerlidir (örn.search,email,date,password,hidden, vb.)multipleözniteliği olmayan<select>öğeleri, değeri, seçilioption'ınvalueözniteliğine karşılık gelen bir dize olarak döndürür veya seçili seçenek yoksaundefineddöndürür.<select multiple>öğeleri, seçili seçeneklerin tüm değerlerini içeren bir dizi olarak döndürür.<textarea>öğeleri değerlerini bir dize olarak döndürür. Değer, düğüm içeriklerine karşılık gelir.
Yukarıdaki kurallar, örneğin, tek bir seçim denetiminden bir radyo düğmesi grubuna geçmeyi kolaylaştırır. Veya çoklu seçim denetiminden bir onay kutusu grubuna geçmeyi. Bu eşleştiricinin karşılaştırma için kullandığı sonuçtaki form değerleri kümesi aynı olacaktır.
<form data-testid="login-form">
<input type="text" name="username" value="jane.doe" />
<input type="password" name="password" value="12345678" />
<input type="checkbox" name="rememberMe" checked />
<button type="submit">Sign in</button>
</form>await expect.element(getByTestId('login-form')).toHaveFormValues({
username: 'jane.doe',
rememberMe: true,
});toHaveStyle
function toHaveStyle(css: string | Partial<CSSStyleDeclaration>): Promise<void>;Bu, belirli bir öğenin belirli CSS özelliklerine belirli değerlerle uygulanıp uygulanmadığını kontrol etmenizi sağlar. Yalnızca öğe beklenen tüm özelliklere sahipse eşleşir, sadece bazılarına değil.
<button
data-testid="delete-button"
style="display: none; background-color: red"
>
Delete item
</button>const button = getByTestId('delete-button');
await expect.element(button).toHaveStyle('display: none');
await expect.element(button).toHaveStyle({ display: 'none' });
await expect.element(button).toHaveStyle(`
background-color: red;
display: none;
`);
await expect.element(button).toHaveStyle({
backgroundColor: 'red',
display: 'none',
});
await expect.element(button).not.toHaveStyle(`
background-color: blue;
display: none;
`);
await expect.element(button).not.toHaveStyle({
backgroundColor: 'blue',
display: 'none',
});Bu, belgede şu anda etkin olan bir stil sayfasında bazı kuralların tanımlandığı bir sınıf adı aracılığıyla öğeye uygulanan kurallarla da çalışır. Normal CSS öncelik kuralları geçerlidir.
toHaveTextContent
function toHaveTextContent(
text: string | RegExp,
options?: { normalizeWhitespace: boolean }
): Promise<void>;Bu, verilen düğümün bir metin içeriğine sahip olup olmadığını kontrol etmenizi sağlar. Bu, öğeleri desteklediği gibi, metin düğümlerini ve parçalarını da destekler.
Bir string argümanı geçirildiğinde, düğüm içeriğiyle kısmi ve büyük/küçük harfe duyarlı bir eşleşme gerçekleştirir.
Büyük/küçük harfe duyarsız bir eşleşme gerçekleştirmek için /i değiştiricisine sahip bir RegExp kullanabilirsiniz.
Tüm içeriği eşleştirmek istiyorsanız, bunu yapmak için bir RegExp kullanabilirsiniz.
<span data-testid="text-content">Text Content</span>const element = getByTestId('text-content');
await expect.element(element).toHaveTextContent('Content');
// tüm içeriği eşleştirmek için
await expect.element(element).toHaveTextContent(/^Text Content$/);
// büyük/küçük harfe duyarsız eşleşme kullanmak için
await expect.element(element).toHaveTextContent(/content$/i);
await expect.element(element).not.toHaveTextContent('content');toHaveValue
function toHaveValue(value: string | string[] | number | null): Promise<void>;Bu, verilen form öğesinin belirtilen değere sahip olup olmadığını kontrol etmenizi sağlar. <input>, <select> ve <textarea> öğelerini kabul eder; ancak yalnızca toBeChecked veya toHaveFormValues kullanılarak anlamlı bir şekilde eşleştirilebilen <input type="checkbox"> ve <input type="radio"> hariçtir.
Ayrıca meter, progressbar, slider veya spinbutton rolleri olan öğeleri kabul eder ve aria-valuenow özniteliklerini (sayı olarak) kontrol eder.
Diğer tüm form öğeleri için değer, toHaveFormValues ile aynı algoritma kullanılarak eşleştirilir.
<input type="text" value="text" data-testid="input-text" />
<input type="number" value="5" data-testid="input-number" />
<input type="text" data-testid="input-empty" />
<select multiple data-testid="select-number">
<option value="first">First Value</option>
<option value="second" selected>Second Value</option>
<option value="third" selected>Third Value</option>
</select>const textInput = getByTestId('input-text');
const numberInput = getByTestId('input-number');
const emptyInput = getByTestId('input-empty');
const selectInput = getByTestId('select-number');
await expect.element(textInput).toHaveValue('text');
await expect.element(numberInput).toHaveValue(5);
await expect.element(emptyInput).not.toHaveValue();
await expect.element(selectInput).toHaveValue(['second', 'third']);toHaveDisplayValue
function toHaveDisplayValue(
value: string | RegExp | (string | RegExp)[]
): Promise<void>;Bu, verilen form öğesinin belirtilen görüntülenen değere (son kullanıcının göreceği değer) sahip olup olmadığını kontrol etmenizi sağlar. <input>, <select> ve <textarea> öğelerini kabul eder, ancak yalnızca toBeChecked veya toHaveFormValues kullanılarak anlamlı bir şekilde eşleştirilebilen <input type="checkbox"> ve <input type="radio"> hariç.
<label for="input-example">First name</label>
<input type="text" id="input-example" value="Luca" />
<label for="textarea-example">Description</label>
<textarea id="textarea-example">An example description here.</textarea>
<label for="single-select-example">Fruit</label>
<select id="single-select-example">
<option value="">Select a fruit...</option>
<option value="banana">Banana</option>
<option value="ananas">Ananas</option>
<option value="avocado">Avocado</option>
</select>
<label for="multiple-select-example">Fruits</label>
<select id="multiple-select-example" multiple>
<option value="">Select a fruit...</option>
<option value="banana" selected>Banana</option>
<option value="ananas">Ananas</option>
<option value="avocado" selected>Avocado</option>
</select>const input = page.getByLabelText('First name');
const textarea = page.getByLabelText('Description');
const selectSingle = page.getByLabelText('Fruit');
const selectMultiple = page.getByLabelText('Fruits');
await expect.element(input).toHaveDisplayValue('Luca');
await expect.element(input).toHaveDisplayValue(/Luc/);
await expect
.element(textarea)
.toHaveDisplayValue('An example description here.');
await expect.element(textarea).toHaveDisplayValue(/example/);
await expect.element(selectSingle).toHaveDisplayValue('Select a fruit...');
await expect.element(selectSingle).toHaveDisplayValue(/Select/);
await expect.element(selectMultiple).toHaveDisplayValue([/Avocado/, 'Banana']);toBeChecked
function toBeChecked(): Promise<void>;Bu, verilen öğenin işaretli olup olmadığını kontrol etmenizi sağlar. checkbox veya radio türünde bir input ve checkbox, radio veya switch rolüne sahip, geçerli aria-checked özniteliği "true" veya "false" olan öğeleri kabul eder.
<input type="checkbox" checked data-testid="input-checkbox-checked" />
<input type="checkbox" data-testid="input-checkbox-unchecked" />
<div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />
<div
role="checkbox"
aria-checked="false"
data-testid="aria-checkbox-unchecked"
/>
<input type="radio" checked value="foo" data-testid="input-radio-checked" />
<input type="radio" value="foo" data-testid="input-radio-unchecked" />
<div role="radio" aria-checked="true" data-testid="aria-radio-checked" />
<div role="radio" aria-checked="false" data-testid="aria-radio-unchecked" />
<div role="switch" aria-checked="true" data-testid="aria-switch-checked" />
<div role="switch" aria-checked="false" data-testid="aria-switch-unchecked" />const inputCheckboxChecked = getByTestId('input-checkbox-checked');
const inputCheckboxUnchecked = getByTestId('input-checkbox-unchecked');
const ariaCheckboxChecked = getByTestId('aria-checkbox-checked');
const ariaCheckboxUnchecked = getByTestId('aria-checkbox-unchecked');
await expect.element(inputCheckboxChecked).toBeChecked();
await expect.element(inputCheckboxUnchecked).not.toBeChecked();
await expect.element(ariaCheckboxChecked).toBeChecked();
await expect.element(ariaCheckboxUnchecked).not.toBeChecked();
const inputRadioChecked = getByTestId('input-radio-checked');
const inputRadioUnchecked = getByTestId('input-radio-unchecked');
const ariaRadioChecked = getByTestId('aria-radio-checked');
const ariaRadioUnchecked = getByTestId('aria-radio-unchecked');
await expect.element(inputRadioChecked).toBeChecked();
await expect.element(inputRadioUnchecked).not.toBeChecked();
await expect.element(ariaRadioChecked).toBeChecked();
await expect.element(ariaRadioUnchecked).not.toBeChecked();
const ariaSwitchChecked = getByTestId('aria-switch-checked');
const ariaSwitchUnchecked = getByTestId('aria-switch-unchecked');
await expect.element(ariaSwitchChecked).toBeChecked();
await expect.element(ariaSwitchUnchecked).not.toBeChecked();toBePartiallyChecked
function toBePartiallyChecked(): Promise<void>;Bu, verilen öğenin kısmen işaretli olup olmadığını kontrol etmenizi sağlar. checkbox türünde bir input ve aria-checked="mixed" olan checkbox rolüne sahip öğeleri veya indeterminate değeri true olarak ayarlanmış checkbox türünde input öğelerini kabul eder.
<input type="checkbox" aria-checked="mixed" data-testid="aria-checkbox-mixed" />
<input type="checkbox" checked data-testid="input-checkbox-checked" />
<input type="checkbox" data-testid="input-checkbox-unchecked" />
<div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />
<div
role="checkbox"
aria-checked="false"
data-testid="aria-checkbox-unchecked"
/>
<input type="checkbox" data-testid="input-checkbox-indeterminate" />const ariaCheckboxMixed = getByTestId('aria-checkbox-mixed');
const inputCheckboxChecked = getByTestId('input-checkbox-checked');
const inputCheckboxUnchecked = getByTestId('input-checkbox-unchecked');
const ariaCheckboxChecked = getByTestId('aria-checkbox-checked');
const ariaCheckboxUnchecked = getByTestId('aria-checkbox-unchecked');
const inputCheckboxIndeterminate = getByTestId('input-checkbox-indeterminate');
await expect.element(ariaCheckboxMixed).toBePartiallyChecked();
await expect.element(inputCheckboxChecked).not.toBePartiallyChecked();
await expect.element(inputCheckboxUnchecked).not.toBePartiallyChecked();
await expect.element(ariaCheckboxChecked).not.toBePartiallyChecked();
await expect.element(ariaCheckboxUnchecked).not.toBePartiallyChecked();
inputCheckboxIndeterminate.element().indeterminate = true;
await expect.element(inputCheckboxIndeterminate).toBePartiallyChecked();toHaveRole
function toHaveRole(role: ARIARole): Promise<void>;Bu, bir öğenin beklenen rolüne sahip olduğunu doğrulamanızı sağlar.
Bu, bir öğeye rolün kendisi dışındaki bir sorgu aracılığıyla zaten erişiminiz olduğu ve erişilebilirliği hakkında ek doğrulamalar yapmak istediğiniz durumlarda kullanışlıdır.
Rol, açık bir role ( rol özniteliği aracılığıyla) veya örtük ARIA semantiği aracılığıyla örtük bir role eşleşebilir.
<button data-testid="button">Continue</button>
<div role="button" data-testid="button-explicit">Continue</button>
<button role="switch button" data-testid="button-explicit-multiple">Continue</button>
<a href="/about" data-testid="link">About</a>
<a data-testid="link-invalid">Invalid link<a/>await expect.element(getByTestId('button')).toHaveRole('button');
await expect.element(getByTestId('button-explicit')).toHaveRole('button');
await expect
.element(getByTestId('button-explicit-multiple'))
.toHaveRole('button');
await expect
.element(getByTestId('button-explicit-multiple'))
.toHaveRole('switch');
await expect.element(getByTestId('link')).toHaveRole('link');
await expect.element(getByTestId('link-invalid')).not.toHaveRole('link');
await expect.element(getByTestId('link-invalid')).toHaveRole('generic');WARNING
Roller, ARIA rol hiyerarşisinden miras alınmadan, dize eşitliğiyle tam olarak eşleştirilir. Sonuç olarak, checkbox gibi bir üst sınıf rolünü sorgulamak, switch gibi bir alt sınıf rolüne sahip öğeleri içermeyecektir.
Ayrıca, testing-librarynin aksine Vitest'in, Playwright'ın davranışını takip ederek ilk geçerli rol dışındaki tüm özel rolleri göz ardı ettiğini unutmayın:
<div data-testid="switch" role="switch alert"></div>;
await expect.element(getByTestId('switch')).toHaveRole('switch'); // ✅
await expect.element(getByTestId('switch')).toHaveRole('alert'); // ❌toHaveSelection
function toHaveSelection(selection?: string): Promise<void>;Bu, bir öğenin bir metin seçimine sahip olduğunu doğrulamanızı sağlar.
Bu, bir öğe içinde metnin veya metnin bir kısmının seçili olup olmadığını kontrol etmek için kullanışlıdır. Öğe, metin türünde bir giriş, bir metin alanı veya paragraf, span, div vb. gibi metin içeren herhangi bir başka öğe olabilir.
WARNING
Beklenen seçim bir dizedir; seçim aralığı indekslerini kontrol etmeye izin vermez.
<div>
<input type="text" value="text selected text" data-testid="text" />
<textarea data-testid="textarea">text selected text</textarea>
<p data-testid="prev">prev</p>
<p data-testid="parent">
text <span data-testid="child">selected</span> text
</p>
<p data-testid="next">next</p>
</div>getByTestId('text').element().setSelectionRange(5, 13);
await expect.element(getByTestId('text')).toHaveSelection('selected');
getByTestId('textarea').element().setSelectionRange(0, 5);
await expect.element('textarea').toHaveSelection('text ');
const selection = document.getSelection();
const range = document.createRange();
selection.removeAllRanges();
selection.empty();
selection.addRange(range);
// alt öğe seçimi üst öğe için de geçerlidir
range.selectNodeContents(getByTestId('child').element());
await expect.element(getByTestId('child')).toHaveSelection('selected');
await expect.element(getByTestId('parent')).toHaveSelection('selected');
// önceki tüm, üst öğe metni alt öğeden önce ve kısmi alt öğe seçimi.
range.setStart(getByTestId('prev').element(), 0);
range.setEnd(getByTestId('child').element().childNodes[0], 3);
await expect.element(queryByTestId('prev')).toHaveSelection('prev');
await expect.element(queryByTestId('child')).toHaveSelection('sel');
await expect.element(queryByTestId('parent')).toHaveSelection('text sel');
await expect.element(queryByTestId('next')).not.toHaveSelection();
// kısmi alt öğeden, üst öğe metni alt öğeden sonra ve kısmi sonraki seçimi.
range.setStart(getByTestId('child').element().childNodes[0], 3);
range.setEnd(getByTestId('next').element().childNodes[0], 2);
await expect.element(queryByTestId('child')).toHaveSelection('ected');
await expect.element(queryByTestId('parent')).toHaveSelection('ected text');
await expect.element(queryByTestId('prev')).not.toHaveSelection();
await expect.element(queryByTestId('next')).toHaveSelection('ne');