diff --git a/docs/src/api/class-locatorassertions.md b/docs/src/api/class-locatorassertions.md
index cb5f56027c248..8630051b8b3da 100644
--- a/docs/src/api/class-locatorassertions.md
+++ b/docs/src/api/class-locatorassertions.md
@@ -1413,49 +1413,48 @@ Attribute name.
 * langs:
   - alias-java: hasClass
 
-Ensures the [Locator] points to an element with given CSS classes. This needs to be a full match
-or using a relaxed regular expression.
+Ensures the [Locator] points to an element with given CSS classes. When a string is provided, it must fully match the element's `class` attribute. To match individual classes or perform partial matches, use a regular expression:
 
 **Usage**
 
 ```html
-<div class='selected row' id='component'></div>
+<div class='middle selected row' id='component'></div>
 ```
 
 ```js
 const locator = page.locator('#component');
-await expect(locator).toHaveClass(/selected/);
-await expect(locator).toHaveClass('selected row');
+await expect(locator).toHaveClass('middle selected row');
+await expect(locator).toHaveClass(/(^|\s)selected(\s|$)/);
 ```
 
 ```java
-assertThat(page.locator("#component")).hasClass(Pattern.compile("selected"));
-assertThat(page.locator("#component")).hasClass("selected row");
+assertThat(page.locator("#component")).hasClass(Pattern.compile("(^|\\s)selected(\\s|$)"));
+assertThat(page.locator("#component")).hasClass("middle selected row");
 ```
 
 ```python async
 from playwright.async_api import expect
 
 locator = page.locator("#component")
-await expect(locator).to_have_class(re.compile(r"selected"))
-await expect(locator).to_have_class("selected row")
+await expect(locator).to_have_class(re.compile(r"(^|\\s)selected(\\s|$)"))
+await expect(locator).to_have_class("middle selected row")
 ```
 
 ```python sync
 from playwright.sync_api import expect
 
 locator = page.locator("#component")
-expect(locator).to_have_class(re.compile(r"selected"))
-expect(locator).to_have_class("selected row")
+expect(locator).to_have_class(re.compile(r"(^|\\s)selected(\\s|$)"))
+expect(locator).to_have_class("middle selected row")
 ```
 
 ```csharp
 var locator = Page.Locator("#component");
-await Expect(locator).ToHaveClassAsync(new Regex("selected"));
-await Expect(locator).ToHaveClassAsync("selected row");
+await Expect(locator).ToHaveClassAsync(new Regex("(^|\\s)selected(\\s|$)"));
+await Expect(locator).ToHaveClassAsync("middle selected row");
 ```
 
-Note that if array is passed as an expected value, entire lists of elements can be asserted:
+When an array is passed, the method asserts that the list of elements located matches the corresponding list of expected class values. Each element's class attribute is matched against the corresponding string or regular expression in the array:
 
 ```js
 const locator = page.locator('list > .component');
@@ -2264,7 +2263,7 @@ expect(page.locator('body')).to_match_aria_snapshot(path='/path/to/snapshot.yml'
 ```
 
 ```csharp
-await Expect(page.Locator("body")).ToMatchAriaSnapshotAsync(new { Path = "/path/to/snapshot.yml" }); 
+await Expect(page.Locator("body")).ToMatchAriaSnapshotAsync(new { Path = "/path/to/snapshot.yml" });
 ```
 
 ```java
diff --git a/packages/playwright/types/test.d.ts b/packages/playwright/types/test.d.ts
index 56407fe1e06dc..2feba7da20367 100644
--- a/packages/playwright/types/test.d.ts
+++ b/packages/playwright/types/test.d.ts
@@ -8233,21 +8233,24 @@ interface LocatorAssertions {
 
   /**
    * Ensures the [Locator](https://playwright.dev/docs/api/class-locator) points to an element with given CSS classes.
-   * This needs to be a full match or using a relaxed regular expression.
+   * When a string is provided, it must fully match the element's `class` attribute. To match individual classes or
+   * perform partial matches, use a regular expression:
    *
    * **Usage**
    *
    * ```html
-   * <div class='selected row' id='component'></div>
+   * <div class='middle selected row' id='component'></div>
    * ```
    *
    * ```js
    * const locator = page.locator('#component');
-   * await expect(locator).toHaveClass(/selected/);
-   * await expect(locator).toHaveClass('selected row');
+   * await expect(locator).toHaveClass('middle selected row');
+   * await expect(locator).toHaveClass(/(^|\s)selected(\s|$)/);
    * ```
    *
-   * Note that if array is passed as an expected value, entire lists of elements can be asserted:
+   * When an array is passed, the method asserts that the list of elements located matches the corresponding list of
+   * expected class values. Each element's class attribute is matched against the corresponding string or regular
+   * expression in the array:
    *
    * ```js
    * const locator = page.locator('list > .component');
diff --git a/tests/page/page-check.spec.ts b/tests/page/page-check.spec.ts
index 01b00ddc55c90..42946ce555f02 100644
--- a/tests/page/page-check.spec.ts
+++ b/tests/page/page-check.spec.ts
@@ -18,9 +18,10 @@
 import { test as it, expect } from './pageTest';
 
 it('should check the box @smoke', async ({ page }) => {
-  await page.setContent(`<input id='checkbox' type='checkbox'></input>`);
-  await page.check('input');
-  expect(await page.evaluate(() => window['checkbox'].checked)).toBe(true);
+  await page.setContent(`<div class='middle selected row' id='component'></div>`);
+  const locator = page.locator('#component');
+  await expect(locator).toHaveClass(/(^|\s)selected(\s|$)/);
+  await expect(locator).toHaveClass('middle selected row');
 });
 
 it('should not check the checked box', async ({ page }) => {