如何在WebdriverIO中定位首个带会员锁标识的视频？

你需要修改选择器，精准定位包含会员锁标识（.membership-block.member-only元素）的视频容器，再从中获取对应的视频链接。以下是几种可行方案：

方案1：使用CSS :has()伪类直接定位（推荐） #

利用has()伪类筛选出包含会员锁的视频容器，直接定位目标链接，代码最简洁：

// 定位首个带会员锁的视频链接
const memberVideo = await $('div.vidItem:has(span.membership-block.member-only) a.thumb-link-wrapper.js-rotate');
await memberVideo.click();

说明：该方式依赖浏览器对CSS :has()伪类的支持，现代浏览器及新版WebdriverIO均兼容。

方案2：先筛选会员视频容器再取链接 #

如果环境不支持:has()，可以先获取所有带会员锁的视频容器，再取第一个容器内的链接：

// 获取所有带会员锁的视频容器
const memberVideoContainers = await $$('div.vidItem:has(span.membership-block.member-only)');
// 点击第一个会员视频的链接
const firstMemberVideo = await memberVideoContainers[0].$('a.thumb-link-wrapper.js-rotate');
await firstMemberVideo.click();

方案3：遍历视频列表筛选（兼容性最强） #

通过遍历所有视频容器，检查是否包含会员锁元素，找到第一个符合条件的视频后点击：

const allVideoContainers = await $$('div.vidItem');

for (const container of allVideoContainers) {
    // 检查当前容器是否有会员锁标识
    const hasMemberLock = await container.$('span.membership-block.member-only').isExisting();
    if (hasMemberLock) {
        // 定位并点击视频链接
        const videoLink = await container.$('a.thumb-link-wrapper.js-rotate');
        await videoLink.click();
        break;
    }
}

内容的提问来源于stack exchange，提问作者user18776783