Перейти к основному содержимому

$

Обзор​

Используйте команду $ вместо findElement как более краткую команду, чтобы получить один элемент на странице.

Команда $ возвращает объект, описывающий элемент, на котором можно вызывать команды действия без передачи селектора. Однако, если вы все же передадите селектор, то сначала будет найден соответствующий элемент, а затем вызвано действие для этого элемента. Вы также можете передать объект в качестве селектора, где объект содержит свойство element-6066-11e4-a52e-4f735466cecf со значением ссылки на элемент. Затем команда преобразует ссылку в расширенный элемент WebdriverIO. Примечание: используйте эти объекты элементов только в том случае, если вы уверены, что они существуют на странице. Последнее можно проверить, например, используя команду isExisting.

Вы можете связать $ или $$ вместе, чтобы спуститься по дереву DOM. Но имейте в виду, что объединение команд $ и $$ в цепочки имеет смысл только при использовании стратегий с множественными селекторами. Иначе вы будете делать ненужные запросы, которые замедлят тест (например, $('body').$('div') создаст два запроса, тогда как $('body div') сделает то же самое за один запрос).

к сведению

Подробнее о том, как выбрать определенные элементы, читайте в рецепте «Как использовать селекторы».

Использование​

await browser.$(selector);

Параметры команды​

ИмяТипОписание
selectorString или Function или MatcherСелектор, или JS-функция, или объект Matcher для получения конкретного элемента.

Примеры использования​

index.html

<ul id="menu">
    <li>
        <a href="/">Home</a>
    </li>
    <li>
        <a href="/">Developer Guide</a>
    </li>
    <li>
        <a href="/">API</a>
    </li>
    <li>
        <a href="/">Contribute</a>
    </li>
</ul>
it("should get text of a menu link - JS Function", async ({ browser }) => {
    const text = await browser.$("#menu");

    console.log(
        await text
            .$$("li")[2]
            .$(function () {
                // Использовать здесь стрелочную функцию нельзя.
                // Это Element – https://developer.mozilla.org/en-US/docs/Web/API/Element
                // в этом конкретном примере – это HTMLLIElement
                //
                // TypeScript-пользователи могут сделать что-нибудь вроде:
                // return (this as Element).querySelector('a')
                return this.querySelector("a"); // Element
            })
            .getText(),
    ); // выведет: "API"
});

it("should get text a menu link", async ({ browser }) => {
    const text = await browser.$("#menu");

    console.log(await text.$$("li")[2].$("a").getText()); // выведет: "API"
});

it("should allow to convert protocol result of an element into a WebdriverIO element", async ({
    browser,
}) => {
    const activeElement = await browser.getActiveElement();

    console.log(await browser.$(activeElement).getTagName()); // выведет активный элемент
});

it("should use Androids DataMatcher or ViewMatcher selector", async ({ browser }) => {
    const menuItem = await browser.$({
        name: "hasEntry",
        args: ["title", "ViewTitle"],
        class: "androidx.test.espresso.matcher.ViewMatchers",
    });
    await menuItem.click();

    const menuItem = await browser.$({
        name: "hasEntry",
        args: ["title", "ViewTitle"],
    });
    await menuItem.click();
});