Select html 在 ant-select 中输入元素

Question

我想将一些文本输入到 test cafe 模式中的 Ant Select 字段中。

这是我正在使用的 HTML：我在测试中打开了两个模式，所以我感兴趣的是第二个。目前，我已经尝试了以下方法来识别它，但每次我运行在测试咖啡馆进行测试时，我都会在 .typeText(LayerNameInputForDeletion, layerName, { replace: true }):

行中被告知 The element that matches the specified selector is not visible.

/*
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);
});

这个select或者在ant-Select字段中找不到输入字段：

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

我尝试了几种不同的 select 或无济于事：

更具体的内容：

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中的"inspect"页面select "copy selector"时给出的确切路径：

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");

我在这里错过了什么？我如何 select 要输入的元素？

Answer 1

父 div 有 style="display: none;"。

因此您不能在不可见的输入字段中键入文本。

Select html 在 ant-select 中输入元素

Select html input element in ant-select

html

testing

automated-tests

css-selectors

testcafe