CSS select elements with partial id

Solution 1:

Not with ID selectors since they require complete ID names, but with substring attribute selectors:

div[id^="as_"]
div[id^="bs_"]

But since your elements have a class attribute anyway, why not add a common class to each group of elements and select by that class to make things simpler? You should be able to determine the grouping class using PHP as you do to generate the IDs.

Solution 2:

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}.