![]() ![]() Use constructor options to customize Selector behavior. It only filters the results of the topMenuSnapshot query test('Click a button', async t => ) // TestCafe doesn't filter the DOM. Yet, since every action changes the DOM, each call of the buttons variable yields a different result. The example below contains three identical actions. If you save a Selector query to a variable, TestCafe only executes the query when you call or await that variable. expect(Selector('.holyGrail').exists).ok() If you pass such a Selector to an assertion that expects a non-null return value, the test fails, too: await t.expect(Selector('.holyGrail').count).eql(1) If a test action uses this Selector, the test fails. If a Selector query yields zero matches, its return value is null. If a page action / assertion Selector matches multiple DOM elements, TestCafe performs the action / assertion with the first matching element. The unt property indicates the number of page elements that match the query. TestCafe executes Selector queries when it encounters them in actions and assertions.Įlement selectors can return multiple items. The example above matches button class elements that reside inside nav blocks. Simple Selectors filter the DOM once: Selector('#big-red-button') Ĭompound Selectors filter the DOM multiple times: Selector('nav. If your Selector query does not include methods, you can omit the Selector keyword: t.click('#big-red-button') You can pass any valid Selector query to an action or an assertion: t.click(Selector('#big-red-button')) TestCafe actions can’t target pseudo-elements and require additional code to target the Shadow DOM. Use Element Selectors with Actions and AssertionsĪctions and assertions use Selector queries to identify their targets. The query above only matches button elements with the “click me” label. The withText method helped you narrow down the results. Append Selector methods to the constructor: Selector('button').withText('click me') The Selector above returns all the button elements on the page.Īfter you initialize a Selector, you can perform additional actions with the results of the query. The most common way is to use a CSS Keyword: Selector('button') There are three ways to initialize a Selector. Constructor arguments determine the initial results of the Selector query. Selector queries begin with an invocation of the Selector() constructor. This query matches elements with the big-red-button ID. The t.click action targets the result of the #big-red-button Selector query. Copy and filter another Selector’s resultsĪctions and assertions use Selector query arguments to locate their targets: t.click('#big-red-button'). ![]() Copy and extend another Selector’s query.Simple Selectors and Compound Selectors.Use Element Selectors with Actions and Assertions.Users of popular front-end frameworks, such as React and Angular, can create Selectors that reference components by name. Unlike CSS Keyword queries, Selector methods can freely traverse the DOM tree. Selector methods narrow down your element selection. Selector-based Selectors extend other Selector queries.Function-based Selectors filter the DOM with a client-side function.Keyword-based Selectors look for elements that match the CSS Selector argument.The following query returns the textContent of the #header element: const headerText = await Selector('#header').textContent You can use the Selector Generator to interactively generate and debug Selector queries.Įxecute standalone Selector queries to examine the page. Test actions and assertions accept Selector queries as arguments: await t.click(Selector('#big-red-button')) The following Selector returns an element with the big-red-button ID: Selector('#big-red-button') Selectors filter the DOM and return page elements that match your criteria. Element Selectors are similar in purpose to CSS Selectors. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |