← Back to Discord Forum

Css locator giving wrong results

I have in my app

.grey-row:not(:nth-child(-n+6)) {
    background-color: map-get($ws-big-stone, 50);

This works in my app. But in my playwright test, the same query is bringing in diff elements. Why is this?

it('top cells should have grey background', async({ page }) => {
        const el = page.locator('.grey-row:not(:nth-child(-n+6))');
        await expect(el).toHaveCount(11);
        for (const item of await page.locator('.grey-row:not(:nth-child(-n+6))').all()) {
          await expect(item).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');

This thread is trying to answer question "Why is the CSS locator giving different results in the playwright test compared to the app?"

0 replies
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.