diff --git a/cypress/integration/ui/__snapshots__/scenario1.js.snap b/cypress/integration/ui/__snapshots__/scenario1.js.snap
new file mode 100644
index 00000000..6c29fcec
--- /dev/null
+++ b/cypress/integration/ui/__snapshots__/scenario1.js.snap
@@ -0,0 +1,177 @@
+exports[`use all parts of svg-edit > check tool_source_set #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer"><title>Layer 1</title></g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_line #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.5"
+      style="pointer-events:none"
+      x1="200"
+      y1="200"
+      x2="220"
+      y2="220"
+      id="svg_1"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="1"
+      ></animate>
+    </line>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check tool_shape #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      x1="200"
+      y1="200"
+      x2="220"
+      y2="220"
+      id="svg_1"
+      fill-opacity="1"
+      stroke-opacity="1"
+      transform="rotate(43.2643 210 210)"
+    ></line>
+    <path
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.5"
+      style="pointer-events:none"
+      d="m309.60653833763354,262.7975086895094 c37.05917105721012,-106.31729401658639 182.2582183141481,0 0,136.6936637356111 c-182.2582183141481,-136.6936637356111 -37.05917105721012,-243.0109577521975 0,-136.6936637356111 z"
+      id="svg_2"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="1"
+      ></animate>
+    </path>
+  </g>
+</svg>
+`;
+
+exports[`use all parts of svg-edit > check mode_connect #0`] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  width="640"
+  height="480"
+  id="svgcontent"
+  overflow="visible"
+  x="640"
+  y="480"
+  viewBox="0 0 640 480"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <line
+      fill="none"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      x1="200"
+      y1="200"
+      x2="220"
+      y2="220"
+      id="svg_1"
+      fill-opacity="1"
+      stroke-opacity="1"
+      transform="rotate(43.2643 210 210)"
+    ></line>
+    <path
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      d="m309.60653833763354,262.7975086895094 c37.05917105721012,-106.31729401658639 182.2582183141481,0 0,136.6936637356111 c-182.2582183141481,-136.6936637356111 -37.05917105721012,-243.0109577521975 0,-136.6936637356111 z"
+      id="svg_2"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></path>
+    <rect
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      style="pointer-events:inherit"
+      x="296"
+      y="136"
+      width="150"
+      height="120"
+      id="svg_3"
+      fill-opacity="1"
+      stroke-opacity="1"
+    ></rect>
+    <rect
+      fill="#FF0000"
+      stroke="#000000"
+      stroke-width="5"
+      opacity="0.5"
+      style="pointer-events:inherit"
+      x="446"
+      y="76"
+      width="180"
+      height="180"
+      id="svg_4"
+    >
+      <animate
+        attributeName="opacity"
+        begin="indefinite"
+        dur="0.2"
+        fill="freeze"
+        to="1"
+      ></animate>
+    </rect>
+  </g>
+</svg>
+`;
diff --git a/cypress/integration/ui/scenario1.js b/cypress/integration/ui/scenario1.js
new file mode 100644
index 00000000..becc5409
--- /dev/null
+++ b/cypress/integration/ui/scenario1.js
@@ -0,0 +1,83 @@
+import {
+  visitAndApproveStorage
+} from '../../support/ui-test-helper.js';
+
+const testSnapshot = () => {
+  cy.get('#svgcontent').cleanSnapshot();
+};
+
+describe('use all parts of svg-edit', function () {
+  before(() => {
+    visitAndApproveStorage();
+  });
+
+  it('check tool_source_set', function () {
+    cy.get('#tool_source').click({ force: true });
+    cy.get('#svg_source_textarea')
+      .type('{selectall}', { force: true })
+      .type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+      <g class="layer">
+       <title>Layer 1</title>
+       </g>
+     </svg>`, { force: true, parseSpecialCharSequences: false });
+    cy.get('#tool_source_save').click({ force: true });
+    testSnapshot();
+  });
+  it('check tool_line', function () {
+    cy.get('#tool_line')
+      .click({ force: true });
+    cy.get('#svgcontent')
+      .trigger('mousemove', 200, 200, { force: true })
+      .trigger('mousedown', 200, 200, { force: true })
+      .trigger('mousemove', 20, 20, { force: true })
+      .trigger('mouseup', { force: true });
+    // cy.get('#angle').click({ force: true }).invoke('attr', 'value', '45');
+    //.shadow().get('elix-number-spin-box').shadow().find('plain-repeat-button-0').click({ force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_shape', function () {
+    cy.get('#tool_shapelib').shadow().find('.overall').eq(0).click({ force: true });
+    cy.get('[data-shape="heart"]').click({ force: true });
+    cy.get('#svgcontent')
+      .trigger('mousemove', 200, 200, { force: true })
+      .trigger('mousedown', 200, 200, { force: true })
+      .trigger('mousemove', 20, 20, { force: true })
+      .trigger('mouseup', { force: true });
+    cy.get('#selectorGrip_rotate')
+      .trigger('mousedown')
+      .trigger('mousemove', 20, 20, { force: true })
+      .trigger('mouseup', { force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check mode_connect', function () {
+    cy.get('#tool_rect').click({ force: true });
+    cy.get('#svgcontent')
+      .trigger('mousedown', 100, -60, { force: true })
+      .trigger('mousemove', 250, 60, { force: true })
+      .trigger('mouseup', { force: true });
+    cy.get('#tool_square').click({ force: true });
+    cy.get('#svgcontent')
+      .trigger('mousedown', 250, -60, { force: true })
+      .trigger('mousemove', 430, 120, { force: true })
+      .trigger('mouseup', { force: true });
+    cy.get('#tool_select').click({ force: true });
+    cy.get('#mode_connect').click({ force: true });
+
+    cy.get('#svgcontent')
+      .trigger('mousedown', -10, -10, { force: true })
+      .trigger('mousemove', -180, -180, { force: true })
+      .trigger('mouseup', { force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  /* it('check tool_image', function () {
+
+    cy.get('#tool_image').click({ force: true });
+    cy.get('#svgcontent')
+      .trigger('mousemove', 100, 100, { force: true })
+      .trigger('mousedown', 100, 100, { force: true })
+      .trigger('mouseup', { force: true });
+    cy.on('window:confirm', () => true);
+    cy.get('#svgcontent').toMatchSnapshot();
+  }); */
+
+});