如何使用 webdriverIO 在网格中搜索特定按钮答案

【问题标题】：How to search an specific button in a grid using webdriverIO如何使用 webdriverIO 在网格中搜索特定按钮
【发布时间】：2017-12-06 06:24:33
【问题描述】：

我正在使用 ExtJS 网格面板。这个网格有 20 多行信息，我想在每一行中搜索一个代表 活动模式 的图标，使用 WebdriverIO 作为测试驱动程序。

如何在每一行中搜索直到测试驱动程序找到第一个活动图标？（注意：我正在测试的网格托管在 alegra.com）。

考虑以下 HTML 打印屏幕：

【问题讨论】：

你能提供你要找的html吗？告诉我带有活动图标的行是什么样子的，我可能会帮助你。
萨尔瓦多您是否设法解决了这个问题，或者您仍然需要帮助？看看我给出的 this 答案，用于在 WDIO 中循环遍历 WebElements。另外，您针对的是哪个 alegra.com 视图？（Contactos、Inventarios、Bancos 等）
大家好@iamdanchiv，仍然需要帮助，我现在针对此模块app.alegra.com/invoice，如果您可以看到有一些行的网格，每行管理一些操作图标，我需要在该网格中找到一个活动图标，然后单击它。
好的，等我拿到笔记本电脑后再看看。 :)
嘿@iamdanchiv，我们可以用这个测试做什么？

标签： javascript selenium-webdriver extjs webdriver-io

【解决方案1】：

如果不知道您使用的是哪个定位器，很难确切知道如何执行此操作，但如果您首先获取行列表，然后过滤它们并获取第一个匹配项，它应该会满足您的需求。

public static get rows() { return browser.elements('#someTableId > table > tbody > tr'); }

public static getFirstMatch() {
    return this.rows.value.filter((row: WebdriverIO.Element) =>
        browser.elementIdElement(row.ELEMENT, 'someLocator').value)[0];
}

【讨论】：

嗨，伙计们，这是选择器的截图---> take.ms/bqCwT 如果你能看到有类 .action-icons 并且下面是按钮的名称：[name="详细说明”]。这只是一行，使用extjs选择器的不止一行。
如果您愿意，您也可以在 www.alegra.com 上开设一个测试帐户
不知道截图够不够？
你能解释一下getFirstMatch函数吗，我不清楚
是的，该函数正在表中的所有行中查找与您正在查找的内容匹配的元素，并返回它找到的第一个匹配项。这就是最后的索引签名 ([0]) 的用途。在您的情况下，您需要带有活动图标的行，因此您可以将 someLocator 替换为标识该图标的任何选择器。

【解决方案2】：

我就是这样做的

var icon_type = 'delete';

it('Se elimina una factura', function(){        
        //rellenamos el array de elementos del grid
    var elements = browser.getAttribute('#gridInvoices #gridview-1047-table tbody tr .action-icons img:nth-child(7)','class');
        //Busca la primera coincidencia en el array con type
    var row_num = elements.indexOf(icon_type);

    if(row_num === -1){
        throw new Error('No se encontraron botones activos del tipo "Eliminar" en todo el grid' )
    }else{
        $$('#gridInvoices #gridview-1047-table tbody tr')[row_num].click('.action-icons [title="Eliminar"]');
        browser.click('=Sí')
        };  
});

【讨论】：