'CSS select elements with partial id

I have some elements generated with PHP and I would like to know if it is possible to select an element with an incomplete id, example:

<div class="1" id="as_1"> ... </div>
<div class="2" id="bs_1"> ... </div>

<div class="1" id="as_2"> ... </div>
<div class="2" id="bs_2"> ... </div>

The class is being used to things they have in common, but now I need to select them individually but I don't know the entire id name.

Can I use something like:

#as_{ ... }
#bs_{ ... }
htmlcsscss-selectors


Solution 1:[1]

Not sure if an exact a match to this question but we're using CodeceptJs and for that we have these two equivalent pieces:

myLocator: {

// xpath: "//*[contains(@data-testid, 'drawer')]",
css: '[data-testid*="drawer"]',
},

So using data-testid*= for css instead of contains for xpath so as to match against an element which has its data-testid named something like drawer-{something_dynamic_appended}.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions