Выберите элемент ввода html в муравейнике - PullRequest
Новая
       37

Выберите элемент ввода html в муравейнике

0 голосов
/ 29 марта 2019

Я хочу ввести текст в поле Ant Select внутри модального окна в тестовом кафе.

Это HTML-код, с которым я работаю: htmlForProject Я открываю два модальных режимав тесте, поэтому тот, который меня интересует, является вторым.В настоящее время я попробовал следующее, чтобы идентифицировать его, но каждый раз, когда я запускаю тест в тестовом кафе, мне говорят The element that matches the specified selector is not visible. в строке .typeText(LayerNameInputForDeletion, layerName, { replace: true }): 

/*
goal: open layer adding modal, close it by 
hitting OK, thus accepting the current settings.
Then open layer deleting modal and remove the new layer
 */
test('Can open and accept default layer adding pop up', async t => {

    let layerName = "MyGreatLayer";

    ...

    //open second modal
    await t
        .click('#LayerDeletingPopUpButtonID');

    //select layer delete OK button
    const LayerDeletingModalOKButton = Selector('div.ant-modal').nth(1)
        .find('div.ant-modal-footer')
        .find('button.ant-btn-primary');

    //XXX this selector fails to find the element
    //select the input field from ant Select to enter layer name
    const LayerNameInputForDeletion = Selector('div.ant-modal').nth(1)
        .find('div.ant-modal-body')
        .find('input.ant-select-search__field');

    //click the OK button from the second modal after typing in the layer name
    await t
        .expect(LayerDeletingModalOKButton.with({visibilityCheck: true}).exists)
        .ok({timeout: 30000})
        .hover(LayerDeletingModalOKButton)
        //this typing step fails to find the element
        .typeText(LayerNameInputForDeletion, layerName, { replace: true })
        .click(LayerDeletingModalOKButton);
});

Этот селектор не может найтиполе ввода в поле ant-Select: 

const LayerNameInputForDeletion = Selector('div.ant-modal').nth(1)
    .find('div.ant-modal-body')
    .find('input.ant-select-search__field');

Я пробовал несколько разных селекторов, но безрезультатно:

Что-то более конкретное: 

const LayerNameInputForDeletion = Selector('div.ant-modal').nth(1)
    .find('div.ant-modal-body')
    .find('div.ant-select-selection__rendered')
    .find('div.ant-select-search')
    .find('input.ant-select-search__field');

Точный путь, указанный при выборе «Копировать селектор» на странице «Проверка» в Chrome: 

const LayerNameInputForDeletion = Selector('body > div:nth-child(9) > div > 
    div.ant-modal-wrap > div > div.ant-modal-content > 
    div.ant-modal-body > div > div > div > 
    div.ant-select-search.ant-select-search--inline > div > input');

Сочетание вышеуказанных подходов: 

const LayerNameInputForDeletion = Selector('div.ant-modal').nth(1)
        .find("div.ant-modal-content > 
               div.ant-modal-body > div > div > div > 
               div.ant-select-search.ant-select-search--inline > 
               div > input");

Чего мне здесь не хватает?Как выбрать этот элемент для ввода?

1 Ответ

3 голосов
/ 29 марта 2019

Родительский div имеет style="display: none;".

Таким образом, вы не можете ввести текст в невидимое поле ввода.

...