diff --git a/core/src/components/searchbar/test/basic/e2e.ts b/core/src/components/searchbar/test/basic/e2e.ts
index 138346ad34..bea469b781 100644
--- a/core/src/components/searchbar/test/basic/e2e.ts
+++ b/core/src/components/searchbar/test/basic/e2e.ts
@@ -7,10 +7,29 @@ test('searchbar: basic', async () => {
 
   await page.waitFor(250);
 
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
+  const compares = [];
+  compares.push(await page.compareScreenshot());
 
-  const searchbar = await page.find('ion-searchbar');
+  let searchbar = await page.find('#basic');
   await searchbar.callMethod('setFocus');
-  expect(await page.compareScreenshot('focused')).toMatchScreenshot();
+
+  await page.waitFor(250);
+  searchbar = await page.find('#basic');
+  expect(searchbar).toHaveClass('searchbar-has-focus');
+
+  compares.push(await page.compareScreenshot('focused'));
+
+  // No Cancel Button Searchbar
+  searchbar = await page.find('#noCancel');
+  await searchbar.callMethod('setFocus');
+
+  await page.waitFor(250);
+  searchbar = await page.find('#noCancel');
+  expect(searchbar).toHaveClass('searchbar-has-focus');
+
+  compares.push(await page.compareScreenshot('no cancel button, focused'));
+
+  for (const compare of compares) {
+    expect(compare).toMatchScreenshot();
+  }
 });
diff --git a/core/src/components/searchbar/test/basic/index.html b/core/src/components/searchbar/test/basic/index.html
index f58b911383..49cc0501f2 100644
--- a/core/src/components/searchbar/test/basic/index.html
+++ b/core/src/components/searchbar/test/basic/index.html
@@ -22,7 +22,11 @@
 
     <ion-content id="content">
       <h5 padding-start padding-top> Search - Default </h5>
-      <ion-searchbar value="test" type="tel" show-cancel-button debounce="500">
+      <ion-searchbar id="basic" value="test" type="tel" show-cancel-button debounce="500">
+      </ion-searchbar>
+
+      <h5 padding-start padding-top> Search - No Cancel Button </h5>
+      <ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="false">
       </ion-searchbar>
 
       <h5 padding-start padding-top> Search - Danger </h5>
@@ -42,10 +46,6 @@
         type="number" placeholder="Filter Schedules">
       </ion-searchbar>
 
-      <h5 padding-start padding-top> Search - No Cancel Button </h5>
-      <ion-searchbar value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="false">
-      </ion-searchbar>
-
       <h5 padding-start padding-top> Search - Custom Cancel Button Danger </h5>
       <ion-searchbar show-cancel-button cancel-button-text="Really Long Cancel" color="danger">
       </ion-searchbar>