diff --git a/cypress/integration/ui/__snapshots__/scenario4.js.snap b/cypress/integration/ui/__snapshots__/scenario4.js.snap
index 0716bc69..57e732f8 100644
--- a/cypress/integration/ui/__snapshots__/scenario4.js.snap
+++ b/cypress/integration/ui/__snapshots__/scenario4.js.snap
@@ -440,15 +440,13 @@ exports[`use all parts of svg-edit > check tool_fhrect_change_x_y_coordinate #0`
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
-      x="350"
-      y="230"
+      x="375"
+      y="255"
       width="120"
       height="100"
       id="svg_2"
       fill-opacity="1"
       stroke-opacity="1"
-      cx="25"
-      cy="25"
     ></rect>
     <rect
       fill="#FF0000"
@@ -505,15 +503,13 @@ exports[`use all parts of svg-edit > check tool_fhrect_change_width_height #0`]
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
-      x="350"
-      y="230"
+      x="375"
+      y="255"
       width="145"
       height="125"
       id="svg_2"
       fill-opacity="1"
       stroke-opacity="1"
-      cx="25"
-      cy="25"
     ></rect>
     <rect
       fill="#FF0000"
@@ -570,15 +566,13 @@ exports[`use all parts of svg-edit > check tool_square_clone #0`] = `
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
-      x="350"
-      y="230"
+      x="375"
+      y="255"
       width="145"
       height="125"
       id="svg_2"
       fill-opacity="1"
       stroke-opacity="1"
-      cx="25"
-      cy="25"
     ></rect>
     <rect
       fill="#FF0000"
@@ -658,15 +652,13 @@ exports[`use all parts of svg-edit > check tool_square_bring_to_back #0`] = `
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
-      x="350"
-      y="230"
+      x="375"
+      y="255"
       width="145"
       height="125"
       id="svg_2"
       fill-opacity="1"
       stroke-opacity="1"
-      cx="25"
-      cy="25"
     ></rect>
     <rect
       fill="#FF0000"
@@ -722,15 +714,13 @@ exports[`use all parts of svg-edit > check tool_square_bring_to_front #0`] = `
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
-      x="350"
-      y="230"
+      x="375"
+      y="255"
       width="145"
       height="125"
       id="svg_2"
       fill-opacity="1"
       stroke-opacity="1"
-      cx="25"
-      cy="25"
     ></rect>
     <rect
       fill="#FF0000"
@@ -798,15 +788,13 @@ exports[`use all parts of svg-edit > check tool_square_change_corner_radius #0`]
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
-      x="350"
-      y="230"
+      x="375"
+      y="255"
       width="145"
       height="125"
       id="svg_2"
       fill-opacity="1"
       stroke-opacity="1"
-      cx="25"
-      cy="25"
     ></rect>
     <rect
       fill="#FF0000"
@@ -877,7 +865,7 @@ exports[`use all parts of svg-edit > check tool_rect_change_to_path #0`] = `
       stroke="#000000"
       stroke-width="5"
       opacity="0.5"
-      d="M350,230 L495,230 L495,355 L350,355 L350,230 Z"
+      d="M375,255 L520,255 L520,380 L375,380 L375,255 Z"
       id="svg_2"
       fill-opacity="1"
       stroke-opacity="1"
@@ -936,7 +924,7 @@ exports[`use all parts of svg-edit > check tool_rect_delete #0`] = `
       stroke="#000000"
       stroke-width="5"
       opacity="0.5"
-      d="M350,230 L495,230 L495,355 L350,355 L350,230 Z"
+      d="M375,255 L520,255 L520,380 L375,380 L375,255 Z"
       id="svg_2"
       fill-opacity="1"
       stroke-opacity="1"
diff --git a/cypress/integration/ui/scenario4.js b/cypress/integration/ui/scenario4.js
index 3553f4e2..36b52d98 100644
--- a/cypress/integration/ui/scenario4.js
+++ b/cypress/integration/ui/scenario4.js
@@ -85,11 +85,11 @@ describe('use all parts of svg-edit', function () {
   it('check tool_fhrect_change_x_y_coordinate', function () {
     cy.get('#svg_2').click({ force: true });
     for(let n = 0; n < 25; n ++){
-      cy.get('#ellipse_cx').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+      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('#ellipse_cy').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
+      cy.get('#selected_y').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
         .click({ force: true });
     }
     cy.get('#svgcontent').toMatchSnapshot();
@@ -141,4 +141,24 @@ describe('use all parts of svg-edit', function () {
     cy.get('#tool_delete').click({ force: true });
     cy.get('#svgcontent').toMatchSnapshot();
   });
+  it('check tool_rect_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_rect_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');
+      });
+  });
 });