search

microsoft / playwright

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
https://playwright.dev
Apache License 2.0
67.21k stars 3.7k forks source link

id= not working in combination with has #18421

Closed vethman closed 2 years ago

vethman commented 2 years ago 
private ILocator Component(string title) => _page.Locator($"id=vacancy-card-list > div:has(h3):has-text(\"{title}\")");

gives the following error: waiting for selector "id=vacancy-card-list > div:has(h3):has-text("Corporate Management Assistent") >> button"

But when I use this it works. The only difference is '#' vs 'id=':

private ILocator Component(string title) => _page.Locator($"#vacancy-card-list > div:has(h3):has-text(\"{title}\")");

HTML part:

<div id="vacancy-card-list" data-cy="vacancy-list" x-init="addObserver()">
    <template x-for="(hit, index) in hits" :key="hit.objectID">
        <div>
            <template x-if="index === 4">
                <div x-mirror="[data-sf-element='template-slot']">
                </div>
            </template>
            <div class="relative group bg-white shadow-lg p-4 lg:p-8 mb-8 animate-primary-fade paused" x-bind:data-productid="hit.objectID" data-cy="vacancy">
                <div class="grid grid-cols-1 lg:flex lg:gap-x-4">

                    <div class="flex-grow flex-shrink">

                        <div>
                            <h3 x-html="hit.title" class="mb-2 h6 font-body font-bold pr-7 lg:pr-0"></h3>
                            <div x-html="getSummary(hit)" class="text-sm lg:text-base leading-[150%] xl:tracking-[0.01em] mb-4 lg:mb-8"></div>
                            <div class="flex flex-wrap gap-2 text-sm child:bg-black/5 child:px-3 child:py-2 child:rounded-full child:inline-block">
                                <span x-show="hit.city != null" x-text="hit.city"></span>
                                <span x-show="hit.educationLevel != null" x-text="hit.educationLevel"></span>
                                <span x-show="hit.type != null">
                                    <span x-text="hit.type"></span> (<span x-text="hit.weeklyHours"></span> uur)
                                </span>
                                <span x-text="getSalary(hit)"></span>
                                <span x-show="hit.contractType != null" x-text="hit.contractType"></span>
                                <span x-show="hit.isNationWide">Landelijk</span>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-col justify-between items-end gap-y-4 flex-shrink-0 xl:w-[190px]">
                        <button type="button" class="flex text-primary absolute lg:relative z-10 right-4 top-4 lg:right-0 lg:top-0" x-on:click="$store.favouritesStore.toggleFavourite(hit.objectID);">
                            <svg x-show="!$store.favouritesStore.isFavourite(hit.objectID)" width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M14.6644 0.015C13.2244 0.015 11.8861 0.585 10.8844 1.62L10 2.5275L9.11563 1.605C8.11387 0.57 6.76776 0 5.34338 0C3.919 0 2.56506 0.57 1.55547 1.605C-0.518489 3.7425 -0.518489 7.095 1.55547 9.2325L10 18C11.1661 16.785 17.2002 10.5375 18.4445 9.255C20.5185 7.11 20.5185 3.7575 18.4445 1.62C17.4428 0.585 16.1045 0.015 14.6644 0.015ZM17.3019 8.235C16.2532 9.315 15.2045 10.395 14.1636 11.475L12.7157 12.975C11.8783 13.845 11.0409 14.7075 10.1957 15.5775L10 15.78L2.6981 8.2275C1.20329 6.6825 1.20329 4.17 2.6981 2.625C3.41812 1.8825 4.35727 1.4775 5.34338 1.47C6.32166 1.47 7.26081 1.8825 7.98082 2.625L8.39562 3.0525H8.38779L10.0078 4.7475L12.0348 2.6325C12.7548 1.89 13.694 1.485 14.6723 1.485C15.6506 1.485 16.5897 1.89 17.3097 2.6325C18.8045 4.1775 18.8045 6.69 17.3097 8.235H17.3019Z" fill="currentColor"></path>
                            </svg>
                            <svg x-show="$store.favouritesStore.isFavourite(hit.objectID)" width="20" height="18" viewBox="0 0 20 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="m 14.6644,0.015 c -1.44,0 -2.7783,0.57 -3.78,1.605 L 10,2.5275 9.11563,1.605 C 8.11387,0.57 6.76776,0 5.34338,0 3.919,0 2.56506,0.57 1.55547,1.605 c -2.073959,2.1375 -2.073959,5.49 0,7.6275 L 10,18 c 1.1661,-1.215 7.2002,-7.4625 8.4445,-8.745 2.074,-2.145 2.074,-5.4975 0,-7.635 -1.0017,-1.035 -2.34,-1.605 -3.7801,-1.605 z" fill="currentColor"></path>
                            </svg>
                        </button>
                        <a x-bind:href="getSlug(hit)" class="text-primary font-bold py-2 mt-3 w-full xl:w-auto after:absolute after:inset-0 after:z-[1] after:content-['']">
                            Bekijk vacature
                            <svg class="inline ml-2 group-hover:translate-x-1 transition-transform" width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2 2L6 6L2 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"></path>
                            </svg>

                        </a>
                    </div>
                </div>
            </div>
        </div>
    </template><div>
            <template x-if="index === 4">
                <div x-mirror="[data-sf-element='template-slot']">
                </div>
            </template>

        </div><div>
            <template x-if="index === 4">
                <div x-mirror="[data-sf-element='template-slot']">
                </div>
            </template>
            <div class="relative group bg-white shadow-lg p-4 lg:p-8 mb-8 animate-primary-fade" x-bind:data-productid="hit.objectID" data-cy="vacancy" data-productid="2031211" style="">
                <div class="grid grid-cols-1 lg:flex lg:gap-x-4">

                    <div class="flex-grow flex-shrink">

                        <div>
                            <h3 x-html="hit.title" class="mb-2 h6 font-body font-bold pr-7 lg:pr-0">Management Assistant</h3>
                            <div x-html="getSummary(hit)" class="text-sm lg:text-base leading-[150%] xl:tracking-[0.01em] mb-4 lg:mb-8">Jouw focus ligt op het organisatorisch en secretarieel ontlasten van het bestuur. Het zo efficiënt mogelijk regelen en het direct kunnen oppakken van onvoorziene situaties is een taak die aan jou is besteed. Je bent uitermate goed in complex age...</div>
                            <div class="flex flex-wrap gap-2 text-sm child:bg-black/5 child:px-3 child:py-2 child:rounded-full child:inline-block">
                                <span x-show="hit.city != null" x-text="hit.city">Rotterdam</span>
                                <span x-show="hit.educationLevel != null" x-text="hit.educationLevel">MBO 3/4</span>
                                <span x-show="hit.type != null">
                                    <span x-text="hit.type">Fulltime</span> (<span x-text="hit.weeklyHours">40</span> uur)
                                </span>
                                <span x-text="getSalary(hit)">€&nbsp;3.000 - €&nbsp;3.467 </span>
                                <span x-show="hit.contractType != null" x-text="hit.contractType">Tijdelijk met uitzicht op vast</span>
                                <span x-show="hit.isNationWide" style="display: none;">Landelijk</span>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-col justify-between items-end gap-y-4 flex-shrink-0 xl:w-[190px]">
                        <button type="button" class="flex text-primary absolute lg:relative z-10 right-4 top-4 lg:right-0 lg:top-0" x-on:click="$store.favouritesStore.toggleFavourite(hit.objectID);">
                            <svg x-show="!$store.favouritesStore.isFavourite(hit.objectID)" width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M14.6644 0.015C13.2244 0.015 11.8861 0.585 10.8844 1.62L10 2.5275L9.11563 1.605C8.11387 0.57 6.76776 0 5.34338 0C3.919 0 2.56506 0.57 1.55547 1.605C-0.518489 3.7425 -0.518489 7.095 1.55547 9.2325L10 18C11.1661 16.785 17.2002 10.5375 18.4445 9.255C20.5185 7.11 20.5185 3.7575 18.4445 1.62C17.4428 0.585 16.1045 0.015 14.6644 0.015ZM17.3019 8.235C16.2532 9.315 15.2045 10.395 14.1636 11.475L12.7157 12.975C11.8783 13.845 11.0409 14.7075 10.1957 15.5775L10 15.78L2.6981 8.2275C1.20329 6.6825 1.20329 4.17 2.6981 2.625C3.41812 1.8825 4.35727 1.4775 5.34338 1.47C6.32166 1.47 7.26081 1.8825 7.98082 2.625L8.39562 3.0525H8.38779L10.0078 4.7475L12.0348 2.6325C12.7548 1.89 13.694 1.485 14.6723 1.485C15.6506 1.485 16.5897 1.89 17.3097 2.6325C18.8045 4.1775 18.8045 6.69 17.3097 8.235H17.3019Z" fill="currentColor"></path>
                            </svg>
                            <svg x-show="$store.favouritesStore.isFavourite(hit.objectID)" width="20" height="18" viewBox="0 0 20 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="display: none;">
                                <path d="m 14.6644,0.015 c -1.44,0 -2.7783,0.57 -3.78,1.605 L 10,2.5275 9.11563,1.605 C 8.11387,0.57 6.76776,0 5.34338,0 3.919,0 2.56506,0.57 1.55547,1.605 c -2.073959,2.1375 -2.073959,5.49 0,7.6275 L 10,18 c 1.1661,-1.215 7.2002,-7.4625 8.4445,-8.745 2.074,-2.145 2.074,-5.4975 0,-7.635 -1.0017,-1.035 -2.34,-1.605 -3.7801,-1.605 z" fill="currentColor"></path>
                            </svg>
                        </button>
                        <a x-bind:href="getSlug(hit)" class="text-primary font-bold py-2 mt-3 w-full xl:w-auto after:absolute after:inset-0 after:z-[1] after:content-['']" href="/vacature/management-assistant-(v2031211)">
                            Bekijk vacature
                            <svg class="inline ml-2 group-hover:translate-x-1 transition-transform" width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2 2L6 6L2 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"></path>
                            </svg>

                        </a>
                    </div>
                </div>
            </div>
        </div><div>
            <template x-if="index === 4">
                <div x-mirror="[data-sf-element='template-slot']">
                </div>
            </template>
            <div class="relative group bg-white shadow-lg p-4 lg:p-8 mb-8 animate-primary-fade" x-bind:data-productid="hit.objectID" data-cy="vacancy" data-productid="2026122" style="">
                <div class="grid grid-cols-1 lg:flex lg:gap-x-4">

                    <div class="flex-grow flex-shrink">

                        <div>
                            <h3 x-html="hit.title" class="mb-2 h6 font-body font-bold pr-7 lg:pr-0">Corporate Management Assistent</h3>
                            <div x-html="getSummary(hit)" class="text-sm lg:text-base leading-[150%] xl:tracking-[0.01em] mb-4 lg:mb-8">Jij bent niet op zoek naar een baan, maar op zoek naar een carrière waar jouw persoonlijke én professionele ontwikkeling voorop staat. We zoeken naar corporate Management Assistents voor twee organisaties van 'de big four' (Ben je n...</div>
                            <div class="flex flex-wrap gap-2 text-sm child:bg-black/5 child:px-3 child:py-2 child:rounded-full child:inline-block">
                                <span x-show="hit.city != null" x-text="hit.city">Rotterdam</span>
                                <span x-show="hit.educationLevel != null" x-text="hit.educationLevel">MBO 3/4</span>
                                <span x-show="hit.type != null">
                                    <span x-text="hit.type">Fulltime</span> (<span x-text="hit.weeklyHours">40</span> uur)
                                </span>
                                <span x-text="getSalary(hit)">€&nbsp;2.400 - €&nbsp;3.300 </span>
                                <span x-show="hit.contractType != null" x-text="hit.contractType">Tijdelijk met uitzicht op vast</span>
                                <span x-show="hit.isNationWide" style="display: none;">Landelijk</span>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-col justify-between items-end gap-y-4 flex-shrink-0 xl:w-[190px]">
                        <button type="button" class="flex text-primary absolute lg:relative z-10 right-4 top-4 lg:right-0 lg:top-0" x-on:click="$store.favouritesStore.toggleFavourite(hit.objectID);">
                            <svg x-show="!$store.favouritesStore.isFavourite(hit.objectID)" width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M14.6644 0.015C13.2244 0.015 11.8861 0.585 10.8844 1.62L10 2.5275L9.11563 1.605C8.11387 0.57 6.76776 0 5.34338 0C3.919 0 2.56506 0.57 1.55547 1.605C-0.518489 3.7425 -0.518489 7.095 1.55547 9.2325L10 18C11.1661 16.785 17.2002 10.5375 18.4445 9.255C20.5185 7.11 20.5185 3.7575 18.4445 1.62C17.4428 0.585 16.1045 0.015 14.6644 0.015ZM17.3019 8.235C16.2532 9.315 15.2045 10.395 14.1636 11.475L12.7157 12.975C11.8783 13.845 11.0409 14.7075 10.1957 15.5775L10 15.78L2.6981 8.2275C1.20329 6.6825 1.20329 4.17 2.6981 2.625C3.41812 1.8825 4.35727 1.4775 5.34338 1.47C6.32166 1.47 7.26081 1.8825 7.98082 2.625L8.39562 3.0525H8.38779L10.0078 4.7475L12.0348 2.6325C12.7548 1.89 13.694 1.485 14.6723 1.485C15.6506 1.485 16.5897 1.89 17.3097 2.6325C18.8045 4.1775 18.8045 6.69 17.3097 8.235H17.3019Z" fill="currentColor"></path>
                            </svg>
                            <svg x-show="$store.favouritesStore.isFavourite(hit.objectID)" width="20" height="18" viewBox="0 0 20 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="display: none;">
                                <path d="m 14.6644,0.015 c -1.44,0 -2.7783,0.57 -3.78,1.605 L 10,2.5275 9.11563,1.605 C 8.11387,0.57 6.76776,0 5.34338,0 3.919,0 2.56506,0.57 1.55547,1.605 c -2.073959,2.1375 -2.073959,5.49 0,7.6275 L 10,18 c 1.1661,-1.215 7.2002,-7.4625 8.4445,-8.745 2.074,-2.145 2.074,-5.4975 0,-7.635 -1.0017,-1.035 -2.34,-1.605 -3.7801,-1.605 z" fill="currentColor"></path>
                            </svg>
                        </button>
                        <a x-bind:href="getSlug(hit)" class="text-primary font-bold py-2 mt-3 w-full xl:w-auto after:absolute after:inset-0 after:z-[1] after:content-['']" href="/vacature/corporate-management-assistent-(v2026122)">
                            Bekijk vacature
                            <svg class="inline ml-2 group-hover:translate-x-1 transition-transform" width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2 2L6 6L2 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"></path>
                            </svg>

                        </a>
                    </div>
                </div>
            </div>
        </div>
</div>
aslushnikov commented 2 years ago

@vethman you should use >> instead of > between selectors, like this:

id=vacancy-card-list >> div:has(h3):has-text("Corporate Management Assistent") >> button

Or better yet, use the subtree selection:

page.locator('id=vacancy-card-list').locator('div:has(h3):has-text("Corporate Management Assistent")').locator('button')

You can also use CodeGen to see if it suggests a nice selector; perhaps it will be simpler than what you come up to manually.

Hope this helps! Feel free to file a new issue if you think we can help you!