fix: incorrect error message for non-awaited expect.element() (#8954)

Author: StyleShit

packages/browser/src/client/tester/expect-element.ts

@@ -12,11 +12,10 @@ function element<T extends HTMLElement | SVGElement | null | Locator>(elementOrL
     throw new Error(`Invalid element or locator: ${elementOrLocator}. Expected an instance of HTMLElement, SVGElement or Locator, received ${getType(elementOrLocator)}`)
   }
 
-  return expect.poll<HTMLElement | SVGElement | null>(function element(this: object) {
+  const expectElement = expect.poll<HTMLElement | SVGElement | null>(function element(this: object) {
     if (elementOrLocator instanceof Element || elementOrLocator == null) {
       return elementOrLocator
     }
-    chai.util.flag(this, '_poll.element', true)
 
     const isNot = chai.util.flag(this, 'negate') as boolean
     const name = chai.util.flag(this, '_name') as string
@@ -47,6 +46,10 @@ function element<T extends HTMLElement | SVGElement | null | Locator>(elementOrL
 
     return result
   }, processTimeoutOptions(options))
+
+  chai.util.flag(expectElement, '_poll.element', true)
+
+  return expectElement
 }
 
 expect.extend(matchers)

test/browser/specs/__snapshots__/expect-element-no-awaited.test.ts.snap

@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`should fail for non-awaited expect.element 1`] = `
+"
+⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯
+
+ FAIL  |browser (chromium)| expect-element.test.js > not awaited
+Error: expect.element(locator).toBeInTheDocument() was not awaited. This assertion is asynchronous and must be awaited; otherwise, it is not executed to avoid unhandled rejections:
+
+await expect.element(locator).toBeInTheDocument()
+
+ ❯ expect-element.test.js:18:33
+     16|         const element = page.getByText("Hello Vitest!");
+     17| 
+     18|         expect.element(element).toBeInTheDocument();
+       |                                 ^
+     19|       })
+     20|       
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯
+
+"
+`;

test/browser/specs/expect-element-no-awaited.test.ts

@@ -0,0 +1,46 @@
+import { playwright } from '@vitest/browser-playwright'
+import { expect, test } from 'vitest'
+import { runInlineTests, ts } from '../../test-utils'
+
+test('should fail for non-awaited expect.element', async () => {
+  const { stderr } = await runInlineTests({
+    'expect-element.test.js': ts`
+      import { expect, test, beforeAll } from 'vitest';
+      import { page } from 'vitest/browser';
+
+      beforeAll(() => {
+        document.body.innerHTML = 'Hello Vitest!';
+      });
+  
+      test('awaited', async () => {
+        const element = page.getByText("Hello Vitest!");
+
+        await expect.element(element).toBeInTheDocument();
+      })
+
+      test('not awaited', () => {
+        const element = page.getByText("Hello Vitest!");
+
+        expect.element(element).toBeInTheDocument();
+      })
+      `,
+  }, {
+    projects: [
+      {
+        test: {
+          name: 'browser',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright(),
+            instances: [
+              { browser: 'chromium' },
+            ],
+          },
+        },
+      },
+    ],
+  })
+
+  expect(stderr).toMatchSnapshot()
+})