<p dir="auto">Playwright already offers the important assertion method <code class="notranslate">toHaveClass</code> but unfortunately it is not possible to use it, when explicitly checking for one class attribute.<br>
The function offers several options for the <code class="notranslate">expected</code> argument, but is seems not possible to ensure that the class attribute contains one specific class attribute.<br>
Using a regular expression is possible but relies on the exact order of class attributes and the delimiters used.<br>
Maybe an property could be added the the options argument that allows to specify if the class string should be compared or rather a <code class="notranslate">classList.contains</code> operation (like in the native DOM) is wanted.<br>
Checking for the existence of one specific class attribute in my experience is a very common tasks and should be made as simple as possible.</p>
<p dir="auto">Hi there)</p>
<p dir="auto">I have a strange behavior with toHaveClass assertion.</p>
<p dir="auto">I have an html</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;label class=&quot;MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary Mui-error css-1958la6-MuiFormLabel-root-MuiInputLabel-root&quot; data-shrink=&quot;false&quot; for=&quot;mui-1&quot; id=&quot;mui-1-label&quot;&gt;&lt;/label&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">label</span> <span class="pl-c1">class</span>="<span class="pl-s">MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary Mui-error css-1958la6-MuiFormLabel-root-MuiInputLabel-root</span>" <span class="pl-c1">data-shrink</span>="<span class="pl-s">false</span>" <span class="pl-c1">for</span>="<span class="pl-s">mui-1</span>" <span class="pl-c1">id</span>="<span class="pl-s">mui-1-label</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">And I have assertion:</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="await expect(label).toHaveClass('Mui-error')"><pre class="notranslate"><span class="pl-k">await</span> <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">label</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toHaveClass</span><span class="pl-kos">(</span><span class="pl-s">'Mui-error'</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">which fails, but this one is good:</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="await expect(label).toHaveClass('MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary Mui-error css-1958la6-MuiFormLabel-root-MuiInputLabel-root')"><pre class="notranslate"><span class="pl-k">await</span> <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">label</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toHaveClass</span><span class="pl-kos">(</span><span class="pl-s">'MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary Mui-error css-1958la6-MuiFormLabel-root-MuiInputLabel-root'</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Is that intended?</p>
<p dir="auto">I expected <code class="notranslate">toHaveClass</code> 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?".</p>