html - 在 ant-select 中选择 html 输入元素

Question

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

这是我正在使用的 HTML:我在测试中打开了两个模态，所以我感兴趣的是第二个。目前，我尝试了以下方法来识别它，但每次我在 test cafe 中运行测试时，我都会被告知 The element that matches the specified selector is not visible. on the line 。 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");

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

Answer 1

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

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