[Feature] add expect(locator).toContainClass()

[Diokuz]

Hi there)

I have a strange behavior with toHaveClass assertion.

I have an html

<label class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary Mui-error css-1958la6-MuiFormLabel-root-MuiInputLabel-root" data-shrink="false" for="mui-1" id="mui-1-label"></label>

And I have assertion:

await expect(label).toHaveClass('Mui-error')

which fails, but this one is good:

await expect(label).toHaveClass('MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary Mui-error css-1958la6-MuiFormLabel-root-MuiInputLabel-root')

Is that intended?

I expected toHaveClass be like: "Hey, label, do you have class Mui-error in your bag?", but instead I have "Hey, label, do you have exactly one class and is it Mui-error?".

[mxschmitt]

This is intended as of today. If you want to match for a single class you can do: await expect(label).toHaveClass(/Mui-error/)

[Diokuz]

In that case I would have a false-positive assertion for any class, containing string Mui-error, e.g. foobar-Mui-error-whatever...

Also, this behavior is not the same as in jest-dom https://github.com/testing-library/jest-dom#tohaveclass which seems more logical to me)

[mxschmitt]

@Diokuz we can add toContainClass for that.

Are you interested in contributing this feature? Then let us know!

[Diokuz]

@mxschmitt yes. I already forked toHaveClass and write some code, but failed to find where locator._expect is actually located) So, Im not sure how to use it for my case. Could you help me with that, please?

[mxschmitt]

Here are some code pointers:

• https://github.com/microsoft/playwright/blob/c99ca17199936d4082dc5e458777a6a51a29196d/packages/playwright-core/src/server/frames.ts#L1284
• https://github.com/microsoft/playwright/blob/19010a5ffa23cb0df84af5ce1eb1a8c73cac7fb3/packages/playwright-test/src/matchers/matchers.ts#L148
• https://github.com/microsoft/playwright/blob/0e2855348cba314de3484364eb926626ca97fbd2/packages/playwright-core/src/server/injected/injectedScript.ts#L1020

Let me know if you need more!

[Diokuz]

@mxschmitt am I on the right track?

[mxschmitt]

@mxschmitt am I on the right track?

Yes looks very nice!

[bboyle]

noting that .toHaveClass(/(^|\s)active(\s|$)/) is a more reliable workaround, but would really love the simpler API proposed here! Working with an angular app and the material library and elements have a lot of classes, I really only want to test for a specific one (e.g. is the "active" class present or not), preferably without the hard to read regex :)

[pavelfeldman]

Why was this issue closed?

Thank you for your involvement. This issue was closed due to limited engagement (upvotes/activity), lack of recent activity, and insufficient actionability. To maintain a manageable database, we prioritize issues based on these factors.

If you disagree with this closure, please open a new issue and reference this one. More support or clarity on its necessity may prompt a review. Your understanding and cooperation are appreciated.