如何选择只有部分 src 属性的 DOM 元素？答案

【问题标题】：How to select a DOM element with only part of src attribute?如何选择只有部分 src 属性的 DOM 元素？
【发布时间】：2021-09-30 10:19:50
【问题描述】：

有一件事：我有一个元素需要使用它们的 src 属性来选择，但是 src 属性是这样的：

src = "https://xyz.amazonaws.com/c95eb334-e9ae-43c3-a75d-e926efa4661e/wardrobe/1601210284_bag-thumbnail.jpg?AWSAccessKeyId=AKIAVQ6TQWKMM4EMM232&Expires=1626957604&Signature=dijEMGlUFQ6TQWKMM4EMM232&Expires=1626957604&Signature=dijEMugnIQDEkature=djEMM233 "

我对这部分感兴趣：“1601210284_bag-thumbnail.jpg”。 src 的最后一部分随着每次登录/注销而改变，所以我不能只对所有 src 值进行断言。

有没有办法只使用 src 属性的一部分来选择元素？有什么想法吗？

编辑：我发现 jQuery 有类似属性-包含-选择器之类的东西：[attr*=value]。 testcafe有类似的吗？

【问题讨论】：

标签： testing dom automated-tests e2e-testing testcafe

【解决方案1】：

在你的情况下，你可以使用withAttribute() method 来选择你想要的 HTML 元素：

import Selector from "testcafe";

const mySelector = Selector("img").withAttribute("src", /1601210284_bag-thumbnail.jpg/i);

这假设您正在尝试定位一个 img 元素。如果您以 div 或任何其他元素为目标，则需要相应地替换 Selector 中的内容。 withAttribute 方法接受两个参数，即您要定位的 HTML 元素的属性及其值。对于这两个参数，值可以作为字符串或正则表达式提供。在这种情况下，我将属性作为字符串提供，并将其值作为正则表达式提供。

【讨论】：

【解决方案2】：

看看有没有帮助

Array.from(document.querySelectorAll('img')).filter(function(x) {
                    console.log(new String(x.src).replace(/^.*[\\\/]/, '').split('?')[0]);
                }) ;

 <img src = "https://xyz.amazonaws.com/c95eb334-e9ae-43c3-a75d-e926efa4661e/wardrobe/1601210284_bag-thumbnail.jpg?AWSAccessKeyId=AKIAVQ6TQWKMM4EMM232&Expires=1626957604&Signature=d3ITnIQDEvIk3UknRjEMuglUF0I%3D">


<img src = "https://xyz.amazonaws.com/c95eb334-e9ae-43c3-a75d-e926efa4661e/wardrobe/asdsad-thumbnail.jpg?AWSAccessKeyId=AKIAVQ6TQWKMM4EMM232&Expires=1626957604&Signature=d3ITnIQDEvIk3UknRjEMuglUF0I%3D">

【讨论】：