CSS-elementen selecteren met gedeeltelijke id

Ik heb enkele elementen gegenereerd met PHP en ik zou graag willen weten of het mogelijk is om een ​​element met een onvolledige id te selecteren, bijvoorbeeld:

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

De klas is gewend aan dingen die ze gemeen hebben, maar nu moet ik ze afzonderlijk selecteren, maar ik weet niet de volledige ID-naam.

Kan ik zoiets gebruiken als:

#as_{ ... }
#bs_{ ... }

Antwoord 1, autoriteit 100%

Niet met ID-selectors omdat ze volledige ID-namen vereisen, maar met substring-attribuutselectors:

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

Maar aangezien uw elementen hoe dan ook een classattribuut hebben, waarom zou u dan niet een gemeenschappelijke klasse toevoegen aan elke groep elementen en die klasse selecteren om de zaken eenvoudiger te maken? Je zou de groeperingsklasse moeten kunnen bepalen met behulp van PHP zoals je doet om de ID’s te genereren.


Antwoord 2

We weten niet zeker of deze exact overeenkomt met deze vraag, maar we gebruiken CodeceptJ’s en daarvoor hebben we deze twee equivalente stukken:

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

Dus gebruik css data-testid*=in plaats van xpath bevat om te matchen met een element waarvan de data-testid zoiets heet als drawer-{something_dynamic_appended}.

Other episodes