如何使用Protractor验证页面中指定tagName的元素数量

刚从Java版Selenium转Protractor确实会有点不适应，毕竟Node.js的异步特性和Java的同步写法差异不小，我来帮你搞定这个元素数量统计的问题。

首先，先理清楚核心需求：点击按钮后等待页面加载完成，然后统计某个特定tagName的元素总数。下面是一步步的解决方案：

1. 确保正确引入ExpectedConditions #

首先要确认你已经导入了Protractor的ExpectedConditions（简称EC），这是处理等待逻辑的核心模块：

const { ExpectedConditions: EC } = require('protractor');

2. 优化页面等待逻辑 #

你代码里的等待思路是对的，但需要用browser.wait()来实际触发等待，避免代码直接往下执行导致元素还没加载出来：

// 点击按钮触发页面跳转/加载
await element(by.id('e2e-idAutomate')).click();

// 等待关键元素（比如你写的ngx-carousel）可见，超时时间设为10秒
await browser.wait(EC.visibilityOf(element(by.tagName('ngx-carousel'))), 10000, '页面加载超时，ngx-carousel元素未出现');

这里我用了await，这是现在Protractor推荐的异步写法，比传统的then()链式调用更直观，和Java的同步写法更接近。

3. 统计指定tagName的元素数量 #

要统计多个元素的数量，你需要用element.all()来定位所有匹配的元素，然后调用count()方法获取总数：

// 替换成你完整的tagName，比如'cmyardneo-activity'
const targetTagName = 'cmyardneo-acti...';
const elementCount = await element.all(by.tagName(targetTagName)).count();

// 打印结果或者添加断言
console.log(`匹配${targetTagName}的元素数量为：${elementCount}`);
expect(elementCount).toBe(你的预期数量); // 比如expect(elementCount).toBe(3);

完整示例代码 #

把这些整合起来，完整的测试代码大概是这样：

const { ExpectedConditions: EC } = require('protractor');

describe('统计指定tagName元素数量', () => {
  it('点击按钮后统计元素数量', async () => {
    // 假设你已经打开了目标页面
    await browser.get('你的目标页面URL');

    // 点击触发加载的按钮
    await element(by.id('e2e-idAutomate')).click();

    // 等待页面加载完成
    await browser.wait(EC.visibilityOf(element(by.tagName('ngx-carousel'))), 10000, '页面加载超时');

    // 统计目标元素数量
    const targetTag = 'cmyardneo-acti...'; // 补全你的tagName
    const count = await element.all(by.tagName(targetTag)).count();

    // 断言验证数量是否符合预期
    expect(count).toBe(你期望的数值);
  });
});

一些注意事项 #

• 如果你的目标元素可能存在但不可见，可以把EC.visibilityOf()换成EC.presenceOf()，后者只检查元素是否存在于DOM中，不关心是否可见。
• 确认tagName拼写完全正确，HTML的标签名是区分大小写的（比如Ngx-Carousel和ngx-carousel是不同的）。
• 如果页面加载后元素是动态渲染的，可能需要等待更长时间，或者等待多个元素都加载完成，比如用EC.visibilityOfAllElementsLocatedBy()来等待所有目标元素可见。

内容的提问来源于stack exchange，提问作者Hervé Combey