diff --git a/package-lock.json b/package-lock.json
index 6e2f015f0..c5ac566e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
         "@types/mocha": "^10.0.7",
         "@web/dev-server-esbuild": "0.4.3",
         "@web/test-runner": "0.18.2",
+        "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "0.11.0",
         "autoprefixer": "10.4.17",
         "babel-loader": "9.1.3",
diff --git a/package.json b/package.json
index 036901162..146bdf3b6 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "@types/mocha": "^10.0.7",
     "@web/dev-server-esbuild": "0.4.3",
     "@web/test-runner": "0.18.2",
+    "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "0.11.0",
     "autoprefixer": "10.4.17",
     "babel-loader": "9.1.3",
diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.test.ts b/packages/uui-color-swatch/lib/uui-color-swatch.test.ts
index 14a1710e7..fbb512d48 100644
--- a/packages/uui-color-swatch/lib/uui-color-swatch.test.ts
+++ b/packages/uui-color-swatch/lib/uui-color-swatch.test.ts
@@ -1,5 +1,6 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import { html, fixture, expect, elementUpdated } from '@open-wc/testing';
 import { UUIColorSwatchElement } from './uui-color-swatch.element';
+import { sendMouse } from '@web/test-runner-commands';
 
 describe('UUIColorSwatchElement', () => {
   let element: UUIColorSwatchElement;
@@ -17,4 +18,42 @@ describe('UUIColorSwatchElement', () => {
   it('passes the a11y audit', async () => {
     await expect(element).shadowDom.to.be.accessible();
   });
+
+  describe('selectable', () => {
+    beforeEach(async () => {
+      element.selectable = true;
+    });
+
+    it('can be selected when selectable', async () => {
+      await elementUpdated(element);
+      await sendMouse({
+        type: 'click',
+        position: [15, 15],
+        button: 'left',
+      });
+      expect(element.selected).to.be.true;
+    });
+
+    it('can not be selected when not selectable', async () => {
+      element.selectable = false;
+      await elementUpdated(element);
+      await sendMouse({
+        type: 'click',
+        position: [15, 15],
+        button: 'left',
+      });
+      expect(element.selected).to.be.false;
+    });
+
+    it('cant be selected when disabled', async () => {
+      element.disabled = true;
+      await elementUpdated(element);
+      await sendMouse({
+        type: 'click',
+        position: [15, 15],
+        button: 'left',
+      });
+      expect(element.selected).to.be.false;
+    });
+  });
 });