Как заставить Puppeteer выбрать элемент из antd Select (не родной элемент select)? - PullRequest
Новая
       26

Как заставить Puppeteer выбрать элемент из antd Select (не родной элемент select)?

0 голосов
/ 15 мая 2018

Я пытаюсь заставить кукловода работать с antd Select, но не могу понять, как. Кукловод не работает, потому что не может найти селектор. 

<Select
    id="select-whale-type-dropdown"
    showSearch
    placeholder="Choose one..."
    notFoundContent="Whale Type not found"
>
<Select.Option value="Blue Whale" key="Blue Whale">
    Blue Whale
</Select.Option>
<Select.Option value="Humpback Whale" key="Humpback Whale">
    Humpback Whale
</Select.Option>
<Select.Option value="Pilot Whale" key="Pilot Whale">
    Pilot Whale
</Select.Option>

Сообщение об ошибке: 

1) Frontend crawl test
   Whale crawl
     Selects Humpback Whale as Whale Type:
 Error: waiting for selector "#select-whale-type-dropdown" failed: timeout 30000ms exceeded
  at Timeout.WaitTask._timeoutTimer.setTimeout (node_modules/puppeteer/lib/FrameManager.js:845:60)

Это работало нормально, когда мы все еще использовали выпадающий список Reaction-bootstrap, похоже, что antd не использует нативный элемент select. Есть идеи, как получить antd Select для работы с кукловодом?

Спасибо:)

Jess

1 Ответ

0 голосов
/ 16 мая 2018

Вы правы, нативный элемент <select> не используется. AntD <Select> имеет гораздо больше возможностей, чем может поддерживать.

Так что вам нужно взглянуть на то, что на самом деле рендерит AntD, и дать указание Puppeteer найти этот код. Часть поля ввода выглядит следующим образом: 

<div class="ant-select ant-select-enabled">
    <div class="ant-select-selection
            ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true"
         aria-expanded="false" tabindex="0">
        <div class="ant-select-selection__rendered">
            <div unselectable="unselectable" class="ant-select-selection__placeholder"
                 style="display: block; user-select: none;">Choose one...
            </div>
            <div class="ant-select-search ant-select-search--inline" style="display: none;">
                <div class="ant-select-search__field__wrap">
                    <input id="select-whale-type-dropdown" autocomplete="off"
                           class="ant-select-search__field" value="">
                    <span class="ant-select-search__field__mirror">&nbsp;</span>
                </div>
            </div>
        </div>
        <span class="ant-select-arrow" unselectable="unselectable" style="user-select: none;"><b></b></span></div>
</div>

Затем раскрывающийся список отображается как абсолютно позиционированный элемент div в верхней части страницы, который выглядит следующим образом: 

<div style="position: absolute; top: 0px; left: 0px; width: 100%;">
    <div>
        <div class="ant-select-dropdown ant-select-dropdown--single ant-select-dropdown-placement-bottomLeft  ant-select-dropdown-hidden"
             style="width: 400px; left: 198.5px; top: 1196.08px;">
            <div style="overflow: auto;">
                <ul class="ant-select-dropdown-menu  ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical"
                    role="menu" aria-activedescendant="" tabindex="0">
                    <li unselectable="unselectable" class="ant-select-dropdown-menu-item" role="menuitem"
                        aria-selected="false" style="user-select: none;">Blue Whale
                    </li>
                    <li unselectable="unselectable" class="ant-select-dropdown-menu-item" role="menuitem"
                        aria-selected="false" style="user-select: none;">Humpback Whale
                    </li>
                    <li unselectable="unselectable" class="ant-select-dropdown-menu-item" role="menuitem"
                        aria-selected="false" style="user-select: none;">Pilot Whale
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Таким образом, Puppeteer должен найти поле input#select-whale-type-dropdown, щелкнуть его, а затем поискать теги пунктов меню ul> li. Если у вас есть несколько <Select> на странице, используйте свойство dropdownClassName, чтобы назначать разные имена классов абсолютно позиционированным элементам div, чтобы сделать их индивидуально адресуемыми.

...