From a905f02c763269f68abd3c71a998f8b851d4a5c7 Mon Sep 17 00:00:00 2001
From: agriyadev5 <agriya.dev5@agriya.in>
Date: Fri, 27 Aug 2021 16:34:07 +0530
Subject: [PATCH] #623 tool text cypress test cases added

---
 .../ui/__snapshots__/scenario.js.snap         | 844 ++++++++++++------
 cypress/integration/ui/scenario.js            | 132 ++-
 2 files changed, 664 insertions(+), 312 deletions(-)

diff --git a/cypress/integration/ui/__snapshots__/scenario.js.snap b/cypress/integration/ui/__snapshots__/scenario.js.snap
index 33621388..e515aa6e 100644
--- a/cypress/integration/ui/__snapshots__/scenario.js.snap
+++ b/cypress/integration/ui/__snapshots__/scenario.js.snap
@@ -10,19 +10,7 @@ exports[`use various parts of svg-edit > check tool_source #0`] = `
   y="480"
   viewBox="0 0 640 480"
 >
-  <g class="layer">
-    <title>Layer 1</title>
-    <rect
-      id="rect"
-      fill="#FF0000"
-      height="70"
-      stroke="#000000"
-      stroke-width="5"
-      width="94"
-      x="69.5"
-      y="51.5"
-    ></rect>
-  </g>
+  <g class="layer"><title>Layer 1</title></g>
 </svg>
 `;
 
@@ -37,22 +25,11 @@ exports[`use various parts of svg-edit > check tool_fhpath #0`] = `
   x="640"
   y="480"
   viewBox="0 0 640 480"
+  fill-opacity="1"
+  stroke-opacity="1"
 >
   <g class="layer" style="pointer-events:all">
     <title style="pointer-events:inherit">Layer 1</title>
-    <rect
-      id="rect"
-      fill="#FF0000"
-      height="70"
-      stroke="#000000"
-      stroke-width="5"
-      width="94"
-      x="69.5"
-      y="51.5"
-      style="pointer-events:inherit"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></rect>
   </g>
 </svg>
 `;
@@ -68,27 +45,17 @@ exports[`use various parts of svg-edit > check tool_text #0`] = `
   x="640"
   y="480"
   viewBox="0 0 640 480"
+  fill-opacity="1"
+  stroke-opacity="1"
 >
   <g class="layer">
     <title>Layer 1</title>
-    <rect
-      id="rect"
-      fill="#FF0000"
-      height="70"
-      stroke="#000000"
-      stroke-width="5"
-      width="94"
-      x="69.5"
-      y="51.5"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></rect>
     <text
       fill="#000000"
       stroke="#000000"
       stroke-width="0"
-      x="116"
-      y="87"
+      x="46"
+      y="35"
       id="svg_1"
       font-size="24"
       font-family="Serif"
@@ -114,27 +81,17 @@ exports[`use various parts of svg-edit > check tool_clone #0`] = `
   x="640"
   y="480"
   viewBox="0 0 640 480"
+  fill-opacity="1"
+  stroke-opacity="1"
 >
   <g class="layer">
     <title>Layer 1</title>
-    <rect
-      id="rect"
-      fill="#FF0000"
-      height="70"
-      stroke="#000000"
-      stroke-width="5"
-      width="94"
-      x="69.5"
-      y="51.5"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></rect>
     <text
       fill="#000000"
       stroke="#000000"
       stroke-width="0"
-      x="116"
-      y="87"
+      x="46"
+      y="35"
       id="svg_1"
       font-size="24"
       font-family="Serif"
@@ -149,8 +106,8 @@ exports[`use various parts of svg-edit > check tool_clone #0`] = `
       fill="#000000"
       stroke="#000000"
       stroke-width="0"
-      x="136"
-      y="107"
+      x="66"
+      y="55"
       font-size="24"
       font-family="Serif"
       text-anchor="middle"
@@ -176,27 +133,17 @@ exports[`use various parts of svg-edit > check tool_italic #0`] = `
   x="640"
   y="480"
   viewBox="0 0 640 480"
+  fill-opacity="1"
+  stroke-opacity="1"
 >
   <g class="layer">
     <title>Layer 1</title>
-    <rect
-      id="rect"
-      fill="#FF0000"
-      height="70"
-      stroke="#000000"
-      stroke-width="5"
-      width="94"
-      x="69.5"
-      y="51.5"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></rect>
     <text
       fill="#000000"
       stroke="#000000"
       stroke-width="0"
-      x="116"
-      y="87"
+      x="46"
+      y="35"
       id="svg_1"
       font-size="24"
       font-family="Serif"
@@ -212,8 +159,8 @@ exports[`use various parts of svg-edit > check tool_italic #0`] = `
       fill="#000000"
       stroke="#000000"
       stroke-width="0"
-      x="136"
-      y="107"
+      x="66"
+      y="55"
       font-size="24"
       font-family="Serif"
       text-anchor="middle"
@@ -239,27 +186,17 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = `
   x="640"
   y="480"
   viewBox="0 0 640 480"
+  fill-opacity="1"
+  stroke-opacity="1"
 >
   <g class="layer">
     <title>Layer 1</title>
-    <rect
-      id="rect"
-      fill="#FF0000"
-      height="70"
-      stroke="#000000"
-      stroke-width="5"
-      width="94"
-      x="69.5"
-      y="51.5"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></rect>
     <text
       fill="#000000"
       stroke="#000000"
       stroke-width="0"
-      x="116"
-      y="87"
+      x="46"
+      y="35"
       id="svg_1"
       font-size="24"
       font-family="Serif"
@@ -276,8 +213,8 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = `
       fill="#000000"
       stroke="#000000"
       stroke-width="0"
-      x="136"
-      y="107"
+      x="66"
+      y="55"
       font-size="24"
       font-family="Serif"
       text-anchor="middle"
@@ -292,7 +229,7 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = `
 </svg>
 `;
 
-exports[`use various parts of svg-edit > check change color #0`] = `
+exports[`use various parts of svg-edit > check tool_text_change_x_y_coordinate #0`] = `
 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"
@@ -303,27 +240,17 @@ exports[`use various parts of svg-edit > check change color #0`] = `
   x="640"
   y="480"
   viewBox="0 0 640 480"
+  fill-opacity="1"
+  stroke-opacity="1"
 >
-  <g class="layer">
-    <title>Layer 1</title>
-    <rect
-      id="rect"
-      fill="#FF0000"
-      height="70"
-      stroke="#000000"
-      stroke-width="5"
-      width="94"
-      x="69.5"
-      y="51.5"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></rect>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
     <text
-      fill="#ffff00"
+      fill="#000000"
       stroke="#000000"
       stroke-width="0"
-      x="116"
-      y="87"
+      x="46"
+      y="35"
       id="svg_1"
       font-size="24"
       font-family="Serif"
@@ -331,7 +258,7 @@ exports[`use various parts of svg-edit > check change color #0`] = `
       xml:space="preserve"
       fill-opacity="1"
       stroke-opacity="1"
-      font-=""
+      font-style="italic"
       font-weight="bold"
     >
       AB
@@ -340,8 +267,279 @@ exports[`use various parts of svg-edit > check change color #0`] = `
       fill="#000000"
       stroke="#000000"
       stroke-width="0"
-      x="136"
-      y="107"
+      x="91"
+      y="80"
+      font-size="24"
+      font-family="Serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2"
+    >
+      AB
+    </text>
+  </g>
+</svg>
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_font_size #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"
+  fill-opacity="1"
+  stroke-opacity="1"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      x="46"
+      y="35"
+      id="svg_1"
+      font-size="34"
+      font-family="Serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      font-style="italic"
+      font-weight="bold"
+    >
+      AB
+    </text>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      x="91"
+      y="80"
+      font-size="24"
+      font-family="Serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2"
+    >
+      AB
+    </text>
+  </g>
+</svg>
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_font_family #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"
+  fill-opacity="1"
+  stroke-opacity="1"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      x="46"
+      y="35"
+      id="svg_1"
+      font-size="34"
+      font-family="Serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      font-style="italic"
+      font-weight="bold"
+    >
+      AB
+    </text>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      x="91"
+      y="80"
+      font-size="24"
+      font-family="Serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2"
+    >
+      AB
+    </text>
+  </g>
+</svg>
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_stroke_width #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"
+  fill-opacity="1"
+  stroke-opacity="1"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="1"
+      x="46"
+      y="35"
+      id="svg_1"
+      font-size="34"
+      font-family="Cursive"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      font-style="italic"
+      font-weight="bold"
+    >
+      AB
+    </text>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      x="91"
+      y="80"
+      font-size="24"
+      font-family="Serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2"
+    >
+      AB
+    </text>
+  </g>
+</svg>
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_stroke_style #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"
+  fill-opacity="1"
+  stroke-opacity="1"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="1"
+      x="46"
+      y="35"
+      id="svg_1"
+      font-size="34"
+      font-family="Cursive"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      font-style="italic"
+      font-weight="bold"
+    >
+      AB
+    </text>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      x="91"
+      y="80"
+      font-size="24"
+      font-family="Serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2"
+    >
+      AB
+    </text>
+  </g>
+</svg>
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_stoke_fill_color #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"
+  fill-opacity="1"
+  stroke-opacity="1"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <text
+      fill="#bf0000"
+      stroke="#0000bf"
+      stroke-width="1"
+      x="46"
+      y="35"
+      id="svg_1"
+      font-size="34"
+      font-family="Cursive"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      font-style="italic"
+      font-weight="bold"
+      stroke-dasharray="5,2,2,2"
+    >
+      AB
+    </text>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      x="91"
+      y="80"
       font-size="24"
       font-family="Serif"
       text-anchor="middle"
@@ -367,36 +565,27 @@ exports[`use various parts of svg-edit > check tool_text_anchor_start #0`] = `
   x="640"
   y="480"
   viewBox="0 0 640 480"
+  fill-opacity="1"
+  stroke-opacity="1"
 >
   <g class="layer">
     <title>Layer 1</title>
-    <rect
-      id="rect"
-      fill="#FF0000"
-      height="70"
-      stroke="#000000"
-      stroke-width="5"
-      width="94"
-      x="69.5"
-      y="51.5"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></rect>
     <text
-      fill="#ffff00"
-      stroke="#000000"
-      stroke-width="0"
-      x="116"
-      y="87"
+      fill="#bf0000"
+      stroke="#0000bf"
+      stroke-width="1"
+      x="46"
+      y="35"
       id="svg_1"
-      font-size="24"
-      font-family="Serif"
+      font-size="34"
+      font-family="Cursive"
       text-anchor="start"
       xml:space="preserve"
       fill-opacity="1"
       stroke-opacity="1"
       font-=""
       font-weight="bold"
+      stroke-dasharray="5,2,2,2"
     >
       AB
     </text>
@@ -404,8 +593,8 @@ exports[`use various parts of svg-edit > check tool_text_anchor_start #0`] = `
       fill="#000000"
       stroke="#000000"
       stroke-width="0"
-      x="136"
-      y="107"
+      x="91"
+      y="80"
       font-size="24"
       font-family="Serif"
       text-anchor="middle"
@@ -431,36 +620,27 @@ exports[`use various parts of svg-edit > check tool_text_anchor_middle #0`] = `
   x="640"
   y="480"
   viewBox="0 0 640 480"
+  fill-opacity="1"
+  stroke-opacity="1"
 >
   <g class="layer">
     <title>Layer 1</title>
-    <rect
-      id="rect"
-      fill="#FF0000"
-      height="70"
-      stroke="#000000"
-      stroke-width="5"
-      width="94"
-      x="69.5"
-      y="51.5"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></rect>
     <text
-      fill="#ffff00"
-      stroke="#000000"
-      stroke-width="0"
-      x="116"
-      y="87"
+      fill="#bf0000"
+      stroke="#0000bf"
+      stroke-width="1"
+      x="46"
+      y="35"
       id="svg_1"
-      font-size="24"
-      font-family="Serif"
+      font-size="34"
+      font-family="Cursive"
       text-anchor="middle"
       xml:space="preserve"
       fill-opacity="1"
       stroke-opacity="1"
       font-=""
       font-weight="bold"
+      stroke-dasharray="5,2,2,2"
     >
       AB
     </text>
@@ -468,8 +648,8 @@ exports[`use various parts of svg-edit > check tool_text_anchor_middle #0`] = `
       fill="#000000"
       stroke="#000000"
       stroke-width="0"
-      x="136"
-      y="107"
+      x="91"
+      y="80"
       font-size="24"
       font-family="Serif"
       text-anchor="middle"
@@ -495,36 +675,27 @@ exports[`use various parts of svg-edit > check tool_text_anchor_end #0`] = `
   x="640"
   y="480"
   viewBox="0 0 640 480"
+  fill-opacity="1"
+  stroke-opacity="1"
 >
   <g class="layer">
     <title>Layer 1</title>
-    <rect
-      id="rect"
-      fill="#FF0000"
-      height="70"
-      stroke="#000000"
-      stroke-width="5"
-      width="94"
-      x="69.5"
-      y="51.5"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></rect>
     <text
-      fill="#ffff00"
-      stroke="#000000"
-      stroke-width="0"
-      x="116"
-      y="87"
+      fill="#bf0000"
+      stroke="#0000bf"
+      stroke-width="1"
+      x="46"
+      y="35"
       id="svg_1"
-      font-size="24"
-      font-family="Serif"
+      font-size="34"
+      font-family="Cursive"
       text-anchor="end"
       xml:space="preserve"
       fill-opacity="1"
       stroke-opacity="1"
       font-=""
       font-weight="bold"
+      stroke-dasharray="5,2,2,2"
     >
       AB
     </text>
@@ -532,8 +703,8 @@ exports[`use various parts of svg-edit > check tool_text_anchor_end #0`] = `
       fill="#000000"
       stroke="#000000"
       stroke-width="0"
-      x="136"
-      y="107"
+      x="91"
+      y="80"
       font-size="24"
       font-family="Serif"
       text-anchor="middle"
@@ -548,7 +719,7 @@ exports[`use various parts of svg-edit > check tool_text_anchor_end #0`] = `
 </svg>
 `;
 
-exports[`use various parts of svg-edit > check tool_star #0`] = `
+exports[`use various parts of svg-edit > check tool_text_change_rotation #0`] = `
 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"
@@ -559,36 +730,27 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
   x="640"
   y="480"
   viewBox="0 0 640 480"
+  fill-opacity="1"
+  stroke-opacity="1"
 >
-  <g class="layer">
-    <title>Layer 1</title>
-    <rect
-      id="rect"
-      fill="#FF0000"
-      height="70"
-      stroke="#000000"
-      stroke-width="5"
-      width="94"
-      x="69.5"
-      y="51.5"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></rect>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
     <text
-      fill="#ffff00"
-      stroke="#000000"
-      stroke-width="0"
-      x="116"
-      y="87"
+      fill="#bf0000"
+      stroke="#0000bf"
+      stroke-width="1"
+      x="46"
+      y="35"
       id="svg_1"
-      font-size="24"
-      font-family="Serif"
+      font-size="34"
+      font-family="Cursive"
       text-anchor="end"
       xml:space="preserve"
       fill-opacity="1"
       stroke-opacity="1"
-      font-=""
+      font-style="italic"
       font-weight="bold"
+      stroke-dasharray="5,2,2,2"
     >
       AB
     </text>
@@ -596,8 +758,8 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
       fill="#000000"
       stroke="#000000"
       stroke-width="0"
-      x="136"
-      y="107"
+      x="91"
+      y="80"
       font-size="24"
       font-family="Serif"
       text-anchor="middle"
@@ -605,40 +767,15 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
       fill-opacity="1"
       stroke-opacity="1"
       id="svg_2"
+      transform="rotate(25 91 72)"
     >
       AB
     </text>
-    <polygon
-      cx="370"
-      cy="202"
-      id="svg_3"
-      shape="star"
-      point="5"
-      r="66.66666666666667"
-      radialshift="0"
-      r2="22.222222222222225"
-      orient="point"
-      fill="#ffff00"
-      strokecolor="#000000"
-      strokewidth="0"
-      starradiusmultiplier="3"
-      points="370,135.33333333333331 383.0618944953883,184.02184456944562 433.40376775301024,181.39886704167017 391.13458925100343,208.86704431944327 409.18568348616486,255.93446629166317 370,224.22222222222223 330.81431651383514,255.93446629166317 348.86541074899657,208.86704431944327 306.59623224698976,181.39886704167017 356.9381055046117,184.02184456944562 370,135.33333333333331 383.0618944953883,184.02184456944562 "
-      stroke="#000000"
-      stroke-width="0"
-    >
-      <animate
-        attributeName="opacity"
-        begin="indefinite"
-        dur="0.2"
-        fill="freeze"
-        to="1"
-      ></animate>
-    </polygon>
   </g>
 </svg>
 `;
 
-exports[`use various parts of svg-edit > check tool_polygon #0`] = `
+exports[`use various parts of svg-edit > check tool_text_change_blur #0`] = `
 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"
@@ -649,36 +786,27 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
   x="640"
   y="480"
   viewBox="0 0 640 480"
+  fill-opacity="1"
+  stroke-opacity="1"
 >
-  <g class="layer">
-    <title>Layer 1</title>
-    <rect
-      id="rect"
-      fill="#FF0000"
-      height="70"
-      stroke="#000000"
-      stroke-width="5"
-      width="94"
-      x="69.5"
-      y="51.5"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></rect>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
     <text
-      fill="#ffff00"
-      stroke="#000000"
-      stroke-width="0"
-      x="116"
-      y="87"
+      fill="#bf0000"
+      stroke="#0000bf"
+      stroke-width="1"
+      x="46"
+      y="35"
       id="svg_1"
-      font-size="24"
-      font-family="Serif"
+      font-size="34"
+      font-family="Cursive"
       text-anchor="end"
       xml:space="preserve"
       fill-opacity="1"
       stroke-opacity="1"
-      font-=""
+      font-style="italic"
       font-weight="bold"
+      stroke-dasharray="5,2,2,2"
     >
       AB
     </text>
@@ -686,8 +814,8 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
       fill="#000000"
       stroke="#000000"
       stroke-width="0"
-      x="136"
-      y="107"
+      x="91"
+      y="80"
       font-size="24"
       font-family="Serif"
       text-anchor="middle"
@@ -695,52 +823,186 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
       fill-opacity="1"
       stroke-opacity="1"
       id="svg_2"
+      transform="rotate(25 91 72)"
+      filter="url(#svg_2_blur)"
     >
       AB
     </text>
-    <polygon
-      cx="370"
-      cy="202"
-      id="svg_3"
-      shape="star"
-      point="5"
-      r="66.66666666666667"
-      radialshift="0"
-      r2="22.222222222222225"
-      orient="point"
-      fill="#ffff00"
-      strokecolor="#000000"
-      strokewidth="0"
-      starradiusmultiplier="3"
-      points="370,135.33333333333331 383.0618944953883,184.02184456944562 433.40376775301024,181.39886704167017 391.13458925100343,208.86704431944327 409.18568348616486,255.93446629166317 370,224.22222222222223 330.81431651383514,255.93446629166317 348.86541074899657,208.86704431944327 306.59623224698976,181.39886704167017 356.9381055046117,184.02184456944562 370,135.33333333333331 383.0618944953883,184.02184456944562 "
-      stroke="#000000"
-      stroke-width="0"
-      fill-opacity="1"
-      stroke-opacity="1"
-    ></polygon>
-    <polygon
-      cx="420"
-      cy="302"
-      id="svg_4"
-      shape="regularPoly"
-      sides="5"
-      orient="x"
-      edge="80"
-      fill="#ffff00"
-      strokecolor="#000000"
-      strokewidth="5"
-      points="488.0520646681632,302 441.02924448476534,366.7213595499958 364.94472318115305,342 364.94472318115305,262 441.02924448476534,237.27864045000422 488.0520646681632,302 "
-      stroke="#000000"
-      stroke-width="5"
-    >
-      <animate
-        attributeName="opacity"
-        begin="indefinite"
-        dur="0.2"
-        fill="freeze"
-        to="1"
-      ></animate>
-    </polygon>
   </g>
+  <defs>
+    <filter id="svg_2_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;
+
+exports[`use various parts of svg-edit > check tool_text_change_opacity #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"
+  fill-opacity="1"
+  stroke-opacity="1"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <text
+      fill="#bf0000"
+      stroke="#0000bf"
+      stroke-width="1"
+      x="46"
+      y="35"
+      id="svg_1"
+      font-size="34"
+      font-family="Cursive"
+      text-anchor="end"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      font-style="italic"
+      font-weight="bold"
+      stroke-dasharray="5,2,2,2"
+    >
+      AB
+    </text>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      x="91"
+      y="80"
+      font-size="24"
+      font-family="Serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2"
+      filter="url(#svg_2_blur)"
+      opacity="0.5"
+      transform="rotate(25 91 72)"
+    >
+      AB
+    </text>
+  </g>
+  <defs>
+    <filter id="svg_2_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;
+
+exports[`use various parts of svg-edit > check tool_text_align_to_page #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"
+  fill-opacity="1"
+  stroke-opacity="1"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <text
+      fill="#bf0000"
+      stroke="#0000bf"
+      stroke-width="1"
+      x="46"
+      y="35"
+      id="svg_1"
+      font-size="34"
+      font-family="Cursive"
+      text-anchor="end"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      font-style="italic"
+      font-weight="bold"
+      stroke-dasharray="5,2,2,2"
+    >
+      AB
+    </text>
+    <text
+      fill="#000000"
+      stroke="#000000"
+      stroke-width="0"
+      x="91"
+      y="80"
+      font-size="24"
+      font-family="Serif"
+      text-anchor="middle"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      id="svg_2"
+      filter="url(#svg_2_blur)"
+      opacity="0.5"
+      transform="rotate(25 91 72)"
+    >
+      AB
+    </text>
+  </g>
+  <defs>
+    <filter id="svg_2_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;
+
+exports[`use various parts of svg-edit > check tool_text_delete #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"
+  fill-opacity="1"
+  stroke-opacity="1"
+>
+  <g class="layer" style="pointer-events:all">
+    <title style="pointer-events:inherit">Layer 1</title>
+    <text
+      fill="#bf0000"
+      stroke="#0000bf"
+      stroke-width="1"
+      x="46"
+      y="35"
+      id="svg_1"
+      font-size="34"
+      font-family="Cursive"
+      text-anchor="end"
+      xml:space="preserve"
+      fill-opacity="1"
+      stroke-opacity="1"
+      font-style="italic"
+      font-weight="bold"
+      stroke-dasharray="5,2,2,2"
+    >
+      AB
+    </text>
+  </g>
+  <defs>
+    <filter id="svg_2_blur" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
+    </filter>
+  </defs>
 </svg>
 `;
diff --git a/cypress/integration/ui/scenario.js b/cypress/integration/ui/scenario.js
index df1eec6a..0eb7ce25 100644
--- a/cypress/integration/ui/scenario.js
+++ b/cypress/integration/ui/scenario.js
@@ -18,7 +18,6 @@ describe('use various parts of svg-edit', function () {
       .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>
-        <rect id="rect" fill="#FF0000" height="70" stroke="#000000" stroke-width="5" width="94" x="69.5" y="51.5"/>
        </g>
      </svg>`, { force: true, parseSpecialCharSequences: false });
     cy.get('#tool_source_save').click({ force: true });
@@ -27,7 +26,7 @@ describe('use various parts of svg-edit', function () {
   it('check tool_fhpath', function () {
     cy.get('#tool_fhpath')
       .click({ force: true });
-    cy.get('#rect')
+    cy.get('#svgcontent')
       .trigger('mousemove', 200, 200, { force: true })
       .trigger('mousedown', 200, 200, { force: true })
       .trigger('mousemove', 20, 20, { force: true })
@@ -37,7 +36,7 @@ describe('use various parts of svg-edit', function () {
   it('check tool_text', function () {
     cy.get('#tool_text')
       .click({ force: true });
-    cy.get('#rect')
+    cy.get('#svgcontent')
       .trigger('mousedown',  46, 35, { force: true })
       .trigger('mouseup', { force: true });
     // svgedit use the #text text field to capture the text
@@ -63,11 +62,64 @@ describe('use various parts of svg-edit', function () {
       .click({ force: true });
     testSnapshot();
   });
-  it('check change color', function () {
+  it('check tool_text_change_x_y_coordinate', function () {
+    cy.get('#svg_2').click({ force: true });
+    for(let n = 0; n < 25; n ++){
+      cy.get('#selected_x').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+        .click({ force: true });
+    }
+    for(let n = 0; n < 25; n ++){
+      cy.get('#selected_y').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+        .click({ force: true });
+    }
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_text_change_font_size', function () {
     cy.get('#svg_1').click({ force: true });
-    cy.get('[data-rgb="#ffff00"]')
+    for(let n = 0; n < 10; n ++){
+      cy.get('#font_size').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+        .click({ force: true });
+    }
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_text_change_font_family', function () {
+    cy.get('#svg_1').click({ force: true });
+    cy.get('#tool_font_family').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened');
+    cy.get('#tool_font_family').find('se-list-item').eq(2).shadow().find('elix-option').eq(0)
       .click({ force: true });
-    testSnapshot();
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_text_change_stroke_width', function () {
+    cy.get('#svg_1').click({ force: true });
+    cy.get('#stroke_width').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+      .click({ force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_text_change_stroke_style', function () {
+    cy.get('#svg_1').click({ force: true });
+    cy.get('#stroke_style').shadow().find('elix-dropdown-list').eq(0)
+      .invoke('attr', 'opened', 'opened');
+    cy.get('#stroke_style').find('se-list-item').eq(3).shadow().find('elix-option').eq(0)
+      .click({ force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_text_change_stoke_fill_color', function () {
+    cy.get('#svg_1').click({ force: true });
+    cy.get('#stroke_color').shadow().find('#picker').eq(0).click({ force: true });
+    cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
+      .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+      .find('.QuickColor').eq(51).click({ force: true });
+    cy.get('#stroke_color').shadow().find('#color_picker').eq(0)
+      .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+      .find('#Ok').eq(0).click({ force: true });
+    cy.get('#fill_color').shadow().find('#picker').eq(0).click({ force: true });
+    cy.get('#fill_color').shadow().find('#color_picker').eq(0)
+      .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+      .find('.QuickColor').eq(3).click({ force: true });
+    cy.get('#fill_color').shadow().find('#color_picker').eq(0)
+      .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0)
+      .find('#Ok').eq(0).click({ force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
   });
   it('check tool_text_anchor_start', function () {
     cy.get('#svg_1').click({ force: true });
@@ -87,22 +139,60 @@ describe('use various parts of svg-edit', function () {
       .click({ force: true });
     testSnapshot();
   });
-  it('check tool_star', function () {
-    cy.get('#tool_star')
-      .click({ force: true });
-    cy.get('#svgcontent')
-      .trigger('mousedown', 300, 150, { force: true })
-      .trigger('mousemove', 300, 250, { force: true })
-      .trigger('mouseup', { force: true });
-    testSnapshot();
+  it('check tool_text_change_rotation', function () {
+    cy.get('#svg_2').click({ force: true });
+    for(let n = 0; n < 5; n ++){
+      cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+        .click({ force: true });
+    }
+    cy.get('#svgcontent').toMatchSnapshot();
   });
-  it('check tool_polygon', function () {
-    cy.get('#tool_polygon')
+  it('check tool_text_change_blur', function () {
+    cy.get('#svg_2').click({ force: true });
+    for(let n = 0; n < 10; n ++){
+      cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+        .click({ force: true });
+    }
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_text_change_opacity', function () {
+    cy.get('#svg_2').click({ force: true });
+    for(let n = 0; n < 10; n ++){
+      cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0)
+        .click({ force: true });
+    }
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_text_align_to_page', function () {
+    cy.get('#svg_2').click({ force: true });
+    cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened');
+    cy.get('#tool_position').find('se-list-item').eq(2).shadow().find('elix-option').eq(0)
       .click({ force: true });
-    cy.get('#svgcontent')
-      .trigger('mousedown', 350, 250, { force: true })
-      .trigger('mousemove', 350, 370, { force: true })
-      .trigger('mouseup', { force: true });
-    testSnapshot();
+    cy.get('#svgcontent').toMatchSnapshot();
+  });
+  it('check tool_text_change_class', function () {
+    cy.get('#svg_2').click({ force: true });
+    cy.get('#elem_class').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
+      .type('svg_2_class{enter}', { force: true });
+    cy.get('#svg_2')
+      .should('satisfy', ($el) => {
+        const classList = Array.from($el[0].classList);
+        return classList.includes('svg_2_class');
+      });
+  });
+  it('check tool_text_change_id', function () {
+    cy.get('#svg_2').click({ force: true }).click({ force: true });
+    cy.get('#elem_id').shadow().find('elix-input').eq(0).shadow().find('#inner').eq(0)
+      .type('_id{enter}', { force: true });
+    cy.get('#svg_2_id')
+      .should('satisfy', ($el) => {
+        const classList = Array.from($el[0].classList);
+        return classList.includes('svg_2_class');
+      });
+  });
+  it('check tool_text_delete', function () {
+    cy.get('#svg_2_id').click({ force: true });
+    cy.get('#tool_delete').click({ force: true });
+    cy.get('#svgcontent').toMatchSnapshot();
   });
 });