test: add example for attemtping to click SVG title

Author: jrolfs

test/fixture/locators.test.ts

@@ -119,6 +119,25 @@ test.describe('lib/fixture.ts (locators)', () => {
       expect(await hiddenElements.count()).toEqual(2)
     })
 
+    test.only('supports querying SVG by title', async ({screen}) => {
+      const svg = screen.getByRole('img', {name: 'Vector'})
+
+      expect(await svg.count()).toEqual(1)
+
+      await expect(svg.click()).resolves.not.toThrow()
+    })
+
+    test.only('clicking SVG title element', async ({screen, within}) => {
+      const svg = screen.getByRole('img', {name: 'Vector'})
+      const title = within(svg).getByText('Vector')
+
+      screen.setDefaultTimeout(1000)
+
+      expect(await title.count()).toEqual(1)
+
+      await expect(async () => title.click()).rejects.toThrow()
+    })
+
     test.describe('querying by role with `level` option', () => {
       test('retrieves the correct elements when querying all by role', async ({
         queries: {queryAllByRole},

test/fixtures/page.html

@@ -26,13 +26,23 @@ <h3>Hello h3</h3>
     >
       <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
     </svg>
+
+    <svg
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      width="128px"
+      viewBox="0 0 512 512"
+    >
+      <title>Vector</title>
+      <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
+    </svg>
     </body>
-    
+
     <form>
       <label for="#name">Name</label>
       <input id="name" name="name" type="text" />
     </form>
-    
+
     <label id="user-label">User</label>
     <form aria-labelledby="user-label">
       <label for="username">Username</label>