diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json
index 81c9cdad544a..665f284351fa 100644
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@@ -38,6 +38,7 @@
     "regenerator-runtime": "^0.13.3"
   },
   "devDependencies": {
+    "@storybook/csf": "0.0.1",
     "@types/puppeteer": "^2.0.0"
   },
   "peerDependencies": {
diff --git a/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.ts b/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.ts
index 4bac493cc6f2..d0f8ddbddf07 100644
--- a/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.ts
+++ b/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.ts
@@ -1,46 +1,50 @@
+import { toId } from '@storybook/csf';
+
 import { constructUrl } from '../url';
 
 jest.mock('@storybook/node-logger');
 
+const id = toId('someKind', 'someStory');
+
 describe('Construct URL for Storyshots', () => {
   it('can use a url without path and without query params', () => {
-    expect(constructUrl('http://localhost:9001', 'someKind', 'someStory')).toEqual(
+    expect(constructUrl('http://localhost:9001', id)).toEqual(
       'http://localhost:9001/iframe.html?id=somekind--somestory'
     );
   });
 
   it('can use a url without path (but slash) and without query params', () => {
-    expect(constructUrl('http://localhost:9001/', 'someKind', 'someStory')).toEqual(
+    expect(constructUrl('http://localhost:9001/', id)).toEqual(
       'http://localhost:9001/iframe.html?id=somekind--somestory'
     );
   });
 
   it('can use a url without path and with query params', () => {
-    expect(constructUrl('http://localhost:9001?hello=world', 'someKind', 'someStory')).toEqual(
+    expect(constructUrl('http://localhost:9001?hello=world', id)).toEqual(
       'http://localhost:9001/iframe.html?id=somekind--somestory&hello=world'
     );
   });
 
   it('can use a url without path (buth slash) and with query params', () => {
-    expect(constructUrl('http://localhost:9001/?hello=world', 'someKind', 'someStory')).toEqual(
+    expect(constructUrl('http://localhost:9001/?hello=world', id)).toEqual(
       'http://localhost:9001/iframe.html?id=somekind--somestory&hello=world'
     );
   });
 
   it('can use a url with some path and query params', () => {
-    expect(
-      constructUrl('http://localhost:9001/nice-path?hello=world', 'someKind', 'someStory')
-    ).toEqual('http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world');
+    expect(constructUrl('http://localhost:9001/nice-path?hello=world', id)).toEqual(
+      'http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world'
+    );
   });
 
   it('can use a url with some path (slash) and query params', () => {
-    expect(
-      constructUrl('http://localhost:9001/nice-path/?hello=world', 'someKind', 'someStory')
-    ).toEqual('http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world');
+    expect(constructUrl('http://localhost:9001/nice-path/?hello=world', id)).toEqual(
+      'http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world'
+    );
   });
 
   it('can use a url with file protocol', () => {
-    expect(constructUrl('file://users/storybook', 'someKind', 'someStory')).toEqual(
+    expect(constructUrl('file://users/storybook', id)).toEqual(
       'file://users/storybook/iframe.html?id=somekind--somestory'
     );
   });
diff --git a/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts b/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts
index 49083c46ea66..fbdd5233e5c1 100644
--- a/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts
+++ b/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts
@@ -19,7 +19,7 @@ export const puppeteerTest = (customConfig: Partial<PuppeteerTestConfig> = {}) =
   let page: Page; // Hold ref to the page to screenshot.
 
   const testFn = async ({ context }: any) => {
-    const { kind, framework, name } = context;
+    const { kind, framework, name, id } = context;
     if (framework === 'react-native') {
       // Skip tests since RN is not a browser environment.
       logger.error(
@@ -29,7 +29,7 @@ export const puppeteerTest = (customConfig: Partial<PuppeteerTestConfig> = {}) =
       return;
     }
 
-    const url = constructUrl(storybookUrl, kind, name);
+    const url = constructUrl(storybookUrl, id);
     const options = { context, url };
     if (testBody.filter != null && !testBody.filter(options)) {
       return;
diff --git a/addons/storyshots/storyshots-puppeteer/src/url.ts b/addons/storyshots/storyshots-puppeteer/src/url.ts
index 6c5a1eaef648..f9f75a90cfff 100644
--- a/addons/storyshots/storyshots-puppeteer/src/url.ts
+++ b/addons/storyshots/storyshots-puppeteer/src/url.ts
@@ -1,10 +1,6 @@
-import { toId } from '@storybook/csf';
-
 import { URL } from 'url';
 
-export const constructUrl = (storybookUrl: string, kind: string, story: string) => {
-  const id = toId(kind, story);
-
+export const constructUrl = (storybookUrl: string, id: string) => {
   const storyUrl = `/iframe.html?id=${id}`;
   const { protocol, host, pathname, search } = new URL(storybookUrl);
   const pname = pathname.replace(/\/$/, ''); // removes trailing /
diff --git a/examples/official-storybook/stories/addon-storyshots.stories.js b/examples/official-storybook/stories/addon-storyshots.stories.js
index 904ec48f807e..d2dbf6681b10 100644
--- a/examples/official-storybook/stories/addon-storyshots.stories.js
+++ b/examples/official-storybook/stories/addon-storyshots.stories.js
@@ -22,6 +22,7 @@ export const block = () => {
   );
 };
 block.story = {
+  name: 'Block story',
   parameters: {
     async puppeteerTest(page) {
       const element = await page.$('[data-test-block]');
diff --git a/examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-1-snap.png b/examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-1-snap.png
deleted file mode 100644
index 86ab2fdeaf3c..000000000000
Binary files a/examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-1-snap.png and /dev/null differ
diff --git a/examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-story-1-snap.png b/examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-story-1-snap.png
new file mode 100644
index 000000000000..b676867ea582
Binary files /dev/null and b/examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-story-1-snap.png differ