Merge branch 'dev' into tomain

cypress/e2e/quizHomePageFields.cy.ts

@@ -0,0 +1,140 @@
+import "cypress-file-upload";
+
+describe("Тестирование полей главной страницы", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:3000");
+    cy.wait(1000);
+    cy.contains("Регистрация / Войти").click();
+    const login = "valid_user@exammple.com";
+    const password = "valid_password";
+
+    cy.get("#email").type(login);
+    cy.get("#password").type(password);
+    cy.get('button[type="submit"]').click();
+  });
+
+  it("Тест на создание нового квиза, заполнение полей главной странички,в превью тестовом просмотре и публикации", () => {
+    cy.get('[data-cy="create-quiz"]').click();
+    cy.wait(1000);
+    cy.get('button[data-cy="create-quiz-card"]').click();
+    cy.wait(1000);
+    cy.get('button[data-cy="select-quiz-layout-standard"]').click();
+
+    cy.get("#contentButton").click();
+
+    cy.get("#headingInput").type("Заголовок заголовка");
+    cy.get("#textInput").type("У нас тут какой-то текст");
+    cy.get("#buttonTextInput").type("Нажми на кнопку");
+    cy.get("#phoneInput").type("8-800-000-00-00");
+    cy.get("#companyInput").type("Наш слоган - слоган наш");
+    cy.get("#websiteInput").type("http://vk:3000/edit");
+    cy.get("#legalInformationInput").type("У наших документов есть данные");
+
+    cy.get(`button[data-cy="button-preview"]`).click();
+    cy.wait(2000);
+
+    // проверка введёных значений
+    cy.get(`[data-cy="heading"]`)
+      .should("exist")
+      .and("have.text", "Заголовок заголовка");
+    cy.get(`[data-cy="text"]`)
+      .should("exist")
+      .and("have.text", "У нас тут какой-то текст");
+    cy.get(`[data-cy="phonenumber"`)
+      .should("exist")
+      .and("have.text", "8-800-000-00-00");
+    cy.get(`[data-cy="startpage-button"]`)
+      .should("exist")
+      .and("have.text", "Нажми на кнопку");
+    cy.get(`[data-cy="company"]`)
+      .should("exist")
+      .and("have.text", "Наш слоган - слоган наш");
+    cy.get(`[data-cy="legalInformation"]`)
+      .should("exist")
+      .and("have.text", "У наших документов есть данные");
+
+    cy.get(`button[data-cy="button-preview"]`).click();
+
+    //создаём вопрос для тестового просмотра
+
+    cy.get('[data-cy="setup-questions"]').click();
+
+    cy.wait(500);
+
+    // cy.get('[data-cy="create-question"]').click();
+
+    cy.get(`[data-cy="select-questiontype-images"]`).click();
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(0)
+      .type("1")
+      .type("{enter}");
+
+    cy.get('button[data-cy="back-button"]').scrollIntoView().wait(500).click();
+    cy.wait(1000);
+    cy.visit("http://localhost:3000/view");
+    cy.wait(2000);
+
+    //проверка введёных значений
+    cy.get(`[data-cy="heading"]`)
+      .should("exist")
+      .and("have.text", "Заголовок заголовка");
+    cy.get(`[data-cy="text"]`)
+      .should("exist")
+      .and("have.text", "У нас тут какой-то текст");
+    cy.get(`[data-cy="phonenumber"`)
+      .should("exist")
+      .and("have.text", "8-800-000-00-00");
+    cy.get(`[data-cy="startpage-button"]`)
+      .should("exist")
+      .and("have.text", "Нажми на кнопку");
+    cy.get(`[data-cy="company"]`)
+      .should("exist")
+      .and("have.text", "Наш слоган - слоган наш");
+    cy.get(`[data-cy="legalInformation"]`)
+      .should("exist")
+      .and("have.text", "У наших документов есть данные");
+
+    cy.visit("http://localhost:3000/edit");
+    cy.wait(2000);
+
+    cy.get(`[data-cy="publish-button"]`).click();
+    cy.wait(500);
+
+    let linkText;
+
+    cy.get('[data-cy="link-test"]')
+      .invoke("text")
+      .then((text) => {
+        linkText = text;
+      });
+
+    cy.wait(2000).then(() => {
+      cy.visit(linkText);
+    });
+
+    cy.origin("https://hbpn.link", () => {
+      // <команды, направленные на https://hbpn.link, идут здесь>
+      cy.contains("p", "Заголовок заголовка").should("exist");
+      cy.wait(100);
+      cy.contains("p", "У нас тут какой-то текст").should("exist");
+      cy.wait(100);
+      cy.contains("p", "8-800-000-00-00").should("exist");
+      cy.wait(100);
+      cy.contains("p", "Наш слоган - слоган наш").should("exist");
+      cy.wait(100);
+      cy.contains("p", "У наших документов есть данные").should("exist");
+      cy.wait(100);
+      cy.get(`button`).should("exist").and("have.text", "Нажми на кнопку");
+    });
+
+    cy.visit("http://localhost:3000/list");
+    cy.wait(2000);
+
+    cy.get('[data-cy="quiz-card"] h5')
+      .should("exist")
+      .and("have.text", "Заголовок заголовка");
+  });
+});

cypress/e2e/quizPublish.cy.ts

@@ -1,6 +1,6 @@
 import "cypress-file-upload";
 
-describe("Форма Входа", () => {
+describe("Тестирование публикации", () => {
   beforeEach(() => {
     cy.visit("http://localhost:3000");
     cy.wait(1000);
@@ -19,27 +19,47 @@ describe("Форма Входа", () => {
     cy.get('button[data-cy="create-quiz-card"]').eq(0).click();
     cy.wait(1000);
     cy.get('button[data-cy="select-quiz-layout-standard"]').click();
-
     cy.get('input[type="checkbox"]').click();
 
     cy.get('[data-cy="setup-questions"]').click();
-    cy.contains("button", "Варианты с картинками").click();
 
-    cy.contains("label", "Необязательный вопрос").click();
+    cy.wait(500);
+    cy.get('[data-cy="create-question"]').click();
 
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
+    cy.get(`[data-cy="select-questiontype-images"]`).click();
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
+
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
+    cy.get(
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
+
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(0)
+      .type("1")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(1)
+      .should("have.value", "")
+      .type("2")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(2)
+      .should("have.value", "")
+      .type("3")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(3)
+      .should("have.value", "")
+      .type("4")
+      .type("{enter}");
 
     cy.visit("http://localhost:3000/view");
     cy.wait(500);
 
-    cy.contains("Далее →").should("be.disabled");
+    cy.get("#buttonFurther").should("be.disabled");
     cy.contains("div", "1").click();
 
     cy.wait(500);
-    cy.contains("Далее →").should("not.be.disabled");
+    cy.get("#buttonFurther").should("not.be.disabled");
 
     cy.visit("http://localhost:3000/view");
     cy.visit("http://localhost:3000/edit");
@@ -51,22 +71,39 @@ describe("Форма Входа", () => {
 
     //Варианты ответов +
 
-    cy.contains("button", "Варианты ответов").click();
+    cy.get(`[data-cy="select-questiontype-variant"]`).click();
-    cy.contains("label", "Необязательный вопрос").click();
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
 
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
+      .eq(0)
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
+      .type("1")
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(1)
+      .should("have.value", "")
+      .type("2")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(2)
+      .should("have.value", "")
+      .type("3")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(3)
+      .should("have.value", "")
+      .type("4")
+      .type("{enter}");
 
     cy.visit("http://localhost:3000/view");
     cy.wait(500);
 
-    cy.contains("Далее →").should("be.disabled");
+    cy.get("#buttonFurther").should("be.disabled");
     cy.contains("label", "1").click();
 
     cy.wait(500);
-    cy.contains("Далее →").should("not.be.disabled");
+    cy.get("#buttonFurther").should("not.be.disabled");
 
     cy.visit("http://localhost:3000/view");
     cy.visit("http://localhost:3000/edit");
@@ -80,22 +117,39 @@ describe("Форма Входа", () => {
 
     // Варианты и картинка +
 
-    cy.contains("button", "Варианты и картинка").click();
+    cy.get(`[data-cy="select-questiontype-varimg"]`).click();
-    cy.contains("label", "Необязательный вопрос").click();
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
 
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
+      .eq(0)
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
+      .type("1")
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(1)
+      .should("have.value", "")
+      .type("2")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(2)
+      .should("have.value", "")
+      .type("3")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(3)
+      .should("have.value", "")
+      .type("4")
+      .type("{enter}");
 
     cy.visit("http://localhost:3000/view");
     cy.wait(500);
 
-    cy.contains("Далее →").should("be.disabled");
+    cy.get("#buttonFurther").should("be.disabled");
     cy.contains("div", "1").click();
 
     cy.wait(500);
-    cy.contains("Далее →").should("not.be.disabled");
+    cy.get("#buttonFurther").should("not.be.disabled");
 
     cy.visit("http://localhost:3000/view");
     cy.visit("http://localhost:3000/edit");
@@ -108,21 +162,39 @@ describe("Форма Входа", () => {
 
     //Эмоджи +
 
-    cy.contains("button", "Эмоджи").click();
+    cy.get(`[data-cy="select-questiontype-emoji"]`).click();
-    cy.contains("label", "Необязательный вопрос").click();
+    cy.get(
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
+    ).click();
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
+
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(0)
+      .type("1")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(1)
+      .should("have.value", "")
+      .type("2")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(2)
+      .should("have.value", "")
+      .type("3")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(3)
+      .should("have.value", "")
+      .type("4")
+      .type("{enter}");
 
     cy.visit("http://localhost:3000/view");
     cy.wait(500);
 
-    cy.contains("Далее →").should("be.disabled");
+    cy.get("#buttonFurther").should("be.disabled");
     cy.contains("div", "1").click();
 
     cy.wait(500);
-    cy.contains("Далее →").should("not.be.disabled");
+    cy.get("#buttonFurther").should("not.be.disabled");
 
     cy.visit("http://localhost:3000/view");
     cy.visit("http://localhost:3000/edit");
@@ -135,19 +207,24 @@ describe("Форма Входа", () => {
 
     //Своё поле для ввода +
 
-    cy.contains("button", "Своё поле для ввода").click();
+    cy.get(`[data-cy="select-questiontype-text"]`).click();
-    cy.contains("label", "Необязательный вопрос").click();
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
 
-    cy.get('input[placeholder="Пример ответа"]').eq(0).type("1").type("{enter}");
+    cy.get('input[placeholder="Пример ответа"]')
+      .eq(0)
+      .type("1")
+      .type("{enter}");
 
     cy.visit("http://localhost:3000/view");
     cy.wait(500);
 
-    cy.contains("Далее →").should("be.disabled");
+    cy.get("#buttonFurther").should("be.disabled");
     cy.get('input[type="text"]').type("email@invalid.com");
 
     cy.wait(500);
-    cy.contains("Далее →").should("not.be.disabled");
+    cy.get("#buttonFurther").should("not.be.disabled");
 
     cy.visit("http://localhost:3000/view");
     cy.visit("http://localhost:3000/edit");
@@ -160,23 +237,40 @@ describe("Форма Входа", () => {
 
     //Выпадающий список +
 
-    cy.contains("button", "Выпадающий список").click();
+    cy.get(`[data-cy="select-questiontype-select"]`).click();
-    cy.contains("label", "Необязательный вопрос").click();
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
 
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(0).type("1").type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(1).should("have.value", "").type("2").type("{enter}");
+      .eq(0)
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(2).should("have.value", "").type("3").type("{enter}");
+      .type("1")
-    cy.get('[data-cy="quiz-variant-question-answer"]').eq(3).should("have.value", "").type("4").type("{enter}");
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(1)
+      .should("have.value", "")
+      .type("2")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(2)
+      .should("have.value", "")
+      .type("3")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(3)
+      .should("have.value", "")
+      .type("4")
+      .type("{enter}");
 
     cy.visit("http://localhost:3000/view");
     cy.wait(500);
 
-    cy.contains("Далее →").should("be.disabled");
+    cy.get("#buttonFurther").should("be.disabled");
     cy.get("#display-select").click();
     cy.get("li").eq(0).click();
 
     cy.wait(500);
-    cy.contains("Далее →").should("not.be.disabled");
+    cy.get("#buttonFurther").should("not.be.disabled");
 
     cy.visit("http://localhost:3000/view");
     cy.visit("http://localhost:3000/edit");
@@ -189,13 +283,15 @@ describe("Форма Входа", () => {
 
     //Дата +
 
-    cy.contains("button", "Дата").click();
+    cy.get(`[data-cy="select-questiontype-date"]`).click();
-    cy.contains("label", "Необязательный вопрос").click();
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
 
     cy.visit("http://localhost:3000/view");
     cy.wait(500);
 
-    cy.contains("Далее →").should("be.disabled");
+    cy.get("#buttonFurther").should("be.disabled");
     cy.get('button[data-cy="open-datepicker"]').click();
 
     cy.wait(500);
@@ -203,7 +299,7 @@ describe("Форма Входа", () => {
     cy.get('button[role="gridcell"]').eq(16).click();
 
     cy.wait(500);
-    cy.contains("Далее →").should("not.be.disabled");
+    cy.get("#buttonFurther").should("not.be.disabled");
 
     cy.visit("http://localhost:3000/view");
     cy.visit("http://localhost:3000/edit");
@@ -216,17 +312,22 @@ describe("Форма Входа", () => {
 
     //Ползунок +
 
-    cy.contains("button", "Ползунок").click();
+    cy.get(`[data-cy="select-questiontype-number"]`).click();
-    cy.contains("label", "Необязательный вопрос").click();
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
 
     cy.visit("http://localhost:3000/view");
     cy.wait(500);
 
-    cy.contains("Далее →").should("be.disabled");
+    cy.get("#buttonFurther").should("be.disabled");
-    cy.get('input[aria-invalid="false"][id=":r0:"][placeholder="0"]').type("10");
+
+    cy.get('div[data-cy="textfield"]').as("textFieldDiv");
+
+    cy.get("@textFieldDiv").find("input").type("10");
 
     cy.wait(500);
-    cy.contains("Далее →").should("not.be.disabled");
+    cy.get("#buttonFurther").should("not.be.disabled");
 
     cy.visit("http://localhost:3000/view");
     cy.visit("http://localhost:3000/edit");
@@ -237,19 +338,23 @@ describe("Форма Входа", () => {
     cy.wait(5000);
     cy.get('[data-cy="create-question"]').click();
 
-    //Загрузка файла +
+    // Загрузка файла +
 
-    cy.contains("button", "Загрузка файла").click();
+    cy.get(`[data-cy="select-questiontype-file"]`).click();
-    cy.contains("label", "Необязательный вопрос").click();
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
 
     cy.visit("http://localhost:3000/view");
     cy.wait(500);
 
-    cy.contains("Далее →").should("be.disabled");
+    cy.get("#buttonFurther").should("be.disabled");
-    cy.get('label.MuiButtonBase-root input[type="file"]').attachFile("./image/Bunner.png");
+    cy.get('label.MuiButtonBase-root input[type="file"]').attachFile(
+      "../e2e/image/Bunner.png",
+    );
 
     cy.wait(500);
-    cy.contains("Далее →").should("not.be.disabled");
+    cy.get("#buttonFurther").should("not.be.disabled");
 
     cy.visit("http://localhost:3000/view");
     cy.visit("http://localhost:3000/edit");
@@ -262,17 +367,19 @@ describe("Форма Входа", () => {
 
     // Рейтинг
 
-    cy.contains("button", "Рейтинг").click();
+    cy.get(`[data-cy="select-questiontype-rating"]`).click();
-    cy.contains("label", "Необязательный вопрос").click();
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
 
     cy.visit("http://localhost:3000/view");
     cy.wait(500);
 
-    cy.contains("Далее →").should("be.disabled");
+    cy.get("#buttonFurther").should("be.disabled");
     cy.contains("label", "4 Stars").click();
 
     cy.wait(500);
-    cy.contains("Далее →").should("not.be.disabled");
+    cy.get("#buttonFurther").should("not.be.disabled");
 
     cy.visit("http://localhost:3000/view");
     cy.visit("http://localhost:3000/edit");
@@ -290,7 +397,7 @@ describe("Форма Входа", () => {
     cy.get('[data-cy="delete-quiz"]').each(($button) => {
       cy.wrap($button).click();
       cy.wait(500);
-      cy.contains("button", "Удалить").click();
+      cy.get("#deleteButton").click();
     });
   });
 });

cypress/e2e/quizQuestionsFields.cy.ts

@@ -0,0 +1,495 @@
+describe("Тестирование полей вопросов", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:3000");
+    cy.wait(1000);
+    cy.contains("Регистрация / Войти").click();
+    const login = "valid_user@exammple.com";
+    const password = "valid_password";
+
+    cy.get("#email").type(login);
+    cy.get("#password").type(password);
+    cy.get('button[type="submit"]').click();
+  });
+
+  it("Тест на правильность отображения вопросов в превью и тестовом просмотре ", () => {
+    cy.get('[data-cy="create-quiz"]').click();
+    cy.wait(1000);
+    cy.get('button[data-cy="create-quiz-card"]').eq(0).click();
+    cy.wait(1000);
+    cy.get('button[data-cy="select-quiz-layout-standard"]').click();
+    cy.get('input[type="checkbox"]').click();
+
+    cy.get('[data-cy="setup-questions"]').click();
+
+    cy.wait(500);
+    // cy.get('[data-cy="create-question"]').click();
+
+    cy.get(`[data-cy="select-questiontype-images"]`).click();
+
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
+
+    cy.get("#questionTitle").type("Заголовок вопроса");
+
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(0)
+      .type("1")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(1)
+      .should("have.value", "")
+      .type("2")
+      .type("{enter}");
+
+    // превью
+    cy.get(`button[data-cy="button-preview"]`).click();
+    cy.wait(2000);
+
+    cy.get(".MuiTypography-h6")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+    cy.get(":nth-child(1) > .MuiFormControlLabel-root")
+      .should("exist")
+      .and("have.text", "1");
+    cy.get(":nth-child(2) > .MuiFormControlLabel-root")
+      .should("exist")
+      .and("have.text", "2");
+
+    cy.get(`button[data-cy="button-preview"]`).click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(2000);
+
+    // проверка введёных значений
+    cy.get(".MuiTypography-h5")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.get(":nth-child(1) > .MuiFormControlLabel-root")
+      .should("exist")
+      .and("have.text", "1");
+    cy.get(":nth-child(2) > .MuiFormControlLabel-root")
+      .should("exist")
+      .and("have.text", "2");
+
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Варианты ответов +
+    cy.get(`[data-cy="select-questiontype-variant"]`).click();
+
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
+
+    cy.get("#questionTitle").type("Заголовок вопроса");
+
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(0)
+      .type("1")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(1)
+      .should("have.value", "")
+      .type("2")
+      .type("{enter}");
+
+    // превью
+    cy.get(`button[data-cy="button-preview"]`).click();
+    cy.wait(2000);
+
+    cy.get(".MuiTypography-h6")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+    cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
+    cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
+
+    cy.get(`button[data-cy="button-preview"]`).click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(2000);
+
+    // проверка введёных значений
+    cy.get(".MuiTypography-h5")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
+    cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
+
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    // Варианты и картинка +
+
+    cy.get(`[data-cy="select-questiontype-varimg"]`).click();
+
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
+
+    cy.get("#questionTitle").type("Заголовок вопроса");
+
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(0)
+      .type("1")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(1)
+      .should("have.value", "")
+      .type("2")
+      .type("{enter}");
+
+    // превью
+    cy.get(`button[data-cy="button-preview"]`).click();
+    cy.wait(2000);
+
+    cy.get(".MuiTypography-h6")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+    cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
+    cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
+
+    cy.get(`button[data-cy="button-preview"]`).click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(2000);
+
+    // проверка введёных значений
+    cy.get(".MuiTypography-h5")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
+    cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
+
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Эмоджи +
+
+    cy.get(`[data-cy="select-questiontype-emoji"]`).click();
+
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
+
+    cy.get("#questionTitle").type("Заголовок вопроса");
+
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(0)
+      .type("1")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(1)
+      .should("have.value", "")
+      .type("2")
+      .type("{enter}");
+
+    // превью
+    cy.get(`button[data-cy="button-preview"]`).click();
+    cy.wait(2000);
+
+    cy.get(".MuiTypography-h6")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+    cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
+    cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
+
+    cy.get(`button[data-cy="button-preview"]`).click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(2000);
+
+    // проверка введёных значений
+    cy.get(".MuiTypography-h5")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
+    cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
+
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Своё поле для ввода +
+    cy.get(`[data-cy="select-questiontype-text"]`).click();
+
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
+
+    cy.get("#questionTitle").type("Заголовок вопроса");
+
+    cy.get('input[placeholder="Пример ответа"]')
+      .eq(0)
+      .type("1")
+      .type("{enter}");
+
+    // превью
+    cy.get(`button[data-cy="button-preview"]`).click();
+    cy.wait(2000);
+
+    cy.get(".MuiTypography-h6")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.get('input[placeholder="1"]').should("exist");
+
+    cy.get(`button[data-cy="button-preview"]`).click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(2000);
+
+    // проверка введёных значений
+    cy.get(".MuiTypography-h5")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.get('input[placeholder="1"]').should("exist");
+
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Выпадающий список +
+
+    cy.get(`[data-cy="select-questiontype-select"]`).click();
+
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
+
+    cy.get("#questionTitle").type("Заголовок вопроса");
+
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(0)
+      .type("1")
+      .type("{enter}");
+    cy.get('[data-cy="quiz-variant-question-answer"]')
+      .eq(1)
+      .should("have.value", "")
+      .type("2")
+      .type("{enter}");
+
+    // превью
+    cy.get(`button[data-cy="button-preview"]`).click();
+    cy.wait(2000);
+
+    cy.get(".MuiTypography-h6")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
+    cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
+
+    cy.get(`button[data-cy="button-preview"]`).click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(2000);
+
+    // проверка введёных значений
+    cy.get(".MuiTypography-h5")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.get(".MuiFormControlLabel-label").contains("1").should("exist");
+    cy.get(".MuiFormControlLabel-label").contains("2").should("exist");
+
+    cy.visit("http://localhost:3000/edit");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Дата +
+    cy.get(`[data-cy="select-questiontype-date"]`).click();
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
+
+    cy.get("#questionTitle").type("Заголовок вопроса");
+
+    // превью
+    cy.get(`button[data-cy="button-preview"]`).click();
+    cy.wait(2000);
+
+    cy.get(".MuiTypography-h6")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.get(`button[data-cy="button-preview"]`).click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(2000);
+
+    // проверка введёных значений
+    cy.get(".MuiTypography-h5")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    //Ползунок +
+
+    cy.get(`[data-cy="select-questiontype-number"]`).click();
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
+
+    cy.get("#questionTitle").type("Заголовок вопроса");
+
+    // превью
+    cy.get(`button[data-cy="button-preview"]`).click();
+    cy.wait(2000);
+
+    cy.get(".MuiTypography-h6")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+    cy.get(".MuiTypography-p")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.get(`button[data-cy="button-preview"]`).click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(2000);
+
+    // проверка введёных значений
+    cy.get(".MuiTypography-h5")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    // Загрузка файла +
+
+    cy.get(`[data-cy="select-questiontype-file"]`).click();
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
+
+    cy.get("#questionTitle").type("Заголовок вопроса");
+
+    // превью
+    cy.get(`button[data-cy="button-preview"]`).click();
+    cy.wait(2000);
+
+    cy.get(".MuiTypography-h6")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.get(`button[data-cy="button-preview"]`).click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(2000);
+
+    // проверка введёных значений
+    cy.get(".MuiTypography-h5")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    // Страница
+
+    cy.get(`[data-cy="select-questiontype-page"]`).click();
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
+
+    cy.get("#questionTitle").type("Заголовок вопроса");
+    cy.get("#addText").type("Добавляю текст");
+
+    // превью
+    cy.get(`button[data-cy="button-preview"]`).click();
+    cy.wait(2000);
+
+    cy.get(".MuiTypography-h6")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+    cy.get(".MuiTypography-p")
+      .should("exist")
+      .and("have.text", "Добавляю текст");
+
+    cy.get(`button[data-cy="button-preview"]`).click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(2000);
+
+    // проверка введёных значений
+    cy.get(".MuiTypography-h5")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+    cy.get(".MuiTypography-p")
+      .should("exist")
+      .and("have.text", "Добавляю текст");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+
+    // Рейтинг
+
+    cy.get(`[data-cy="select-questiontype-rating"]`).click();
+    cy.get(
+      '[data-cy="checkbox-optional-question"] > .PrivateSwitchBase-input',
+    ).click();
+
+    cy.get("#questionTitle").type("Заголовок вопроса");
+
+    // превью
+    cy.get(`button[data-cy="button-preview"]`).click();
+    cy.wait(2000);
+
+    cy.get(".MuiTypography-h6")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.get(`button[data-cy="button-preview"]`).click();
+
+    cy.visit("http://localhost:3000/view");
+    cy.wait(2000);
+
+    // проверка введёных значений
+    cy.get(".MuiTypography-h5")
+      .should("exist")
+      .and("have.text", "Заголовок вопроса");
+
+    cy.wait(500);
+    cy.get('[data-cy="delete-question"]').click();
+    cy.wait(5000);
+    cy.get('[data-cy="create-question"]').click();
+  });
+});

src/assets/icons/EcommerceIcon.tsx

@@ -0,0 +1,26 @@
+import { FC, SVGProps } from "react";
+
+export const EcommerceIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    {...props}
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M20.25 4.5H3.75C3.33579 4.5 3 4.83579 3 5.25V18.75C3 19.1642 3.33579 19.5 3.75 19.5H20.25C20.6642 19.5 21 19.1642 21 18.75V5.25C21 4.83579 20.6642 4.5 20.25 4.5Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M15.75 8.25C15.75 9.24456 15.3549 10.1984 14.6517 10.9017C13.9484 11.6049 12.9946 12 12 12C11.0054 12 10.0516 11.6049 9.34835 10.9017C8.64509 10.1984 8.25 9.24456 8.25 8.25"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

src/assets/icons/PieСhartIcon.tsx

@@ -0,0 +1,18 @@
+import { FC, SVGProps } from "react";
+
+export const PieСhartIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    {...props}
+    height="1em"
+    viewBox="0 0 22 23"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11 1V11.8621M11 11.8621L19.5714 7.51724M11 11.8621L18.1429 19.1034M11 22C5.47715 22 1 17.4611 1 11.8621C1 6.26304 5.47715 1.72414 11 1.72414C16.5228 1.72414 21 6.26304 21 11.8621C21 17.4611 16.5228 22 11 22Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

src/assets/icons/SegmentationIcon.tsx

@@ -0,0 +1,45 @@
+import { FC, SVGProps } from "react";
+
+export const SegmentationIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    {...props}
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 2.5V21.5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M19 14C20.6569 14 22 12.6569 22 11C22 9.34315 20.6569 8 19 8C17.3431 8 16 9.34315 16 11C16 12.6569 17.3431 14 19 14Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+    />
+    <path
+      d="M5 14C6.65685 14 8 12.6569 8 11C8 9.34315 6.65685 8 5 8C3.34315 8 2 9.34315 2 11C2 12.6569 3.34315 14 5 14Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+    />
+    <path
+      d="M15 16C15.4901 15.3737 16.1022 14.8701 16.7932 14.5246C17.4843 14.1791 18.2375 14 19 14C19.7625 14 20.5157 14.1791 21.2068 14.5246C21.8978 14.8701 22.5099 15.3737 23 16"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M1 16C1.4901 15.3737 2.10218 14.8701 2.79322 14.5246C3.48427 14.1791 4.23751 14 5 14C5.76249 14 6.51573 14.1791 7.20678 14.5246C7.89782 14.8701 8.5099 15.3737 9 16"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

src/assets/icons/TestingIcon.tsx

@@ -0,0 +1,47 @@
+import { FC, SVGProps } from "react";
+
+export const TestingIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    {...props}
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.25 14.1641H3.75C2.7835 14.1641 2 14.9849 2 15.9974V19.6641C2 20.6766 2.7835 21.4974 3.75 21.4974H7.25C8.2165 21.4974 9 20.6766 9 19.6641V15.9974C9 14.9849 8.2165 14.1641 7.25 14.1641Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7.25 2.5H3.75C2.7835 2.5 2 3.32081 2 4.33333V8C2 9.01252 2.7835 9.83333 3.75 9.83333H7.25C8.2165 9.83333 9 9.01252 9 8V4.33333C9 3.32081 8.2165 2.5 7.25 2.5Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M13.1992 6.10156H22.1992"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M13.1992 17.8984H22.1992"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M4 6.125L5.28571 7.25L7 5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

src/pages/Landing/DesktopQuizCard.tsx

@@ -0,0 +1,89 @@
+import { Box, Fade, Typography } from "@mui/material";
+import { FC } from "react";
+
+interface Iprops {
+  isOpen: boolean;
+  header: string;
+  image: string;
+  text: string;
+}
+
+export const DesktopQuizCard: FC<Iprops> = ({
+  isOpen,
+  header,
+  image,
+  text,
+}) => {
+  return (
+    <Fade
+      style={{ display: isOpen ? "flex" : "none" }}
+      timeout={1000}
+      in={isOpen}
+      unmountOnExit
+    >
+      <Box
+        sx={{
+          width: "100%",
+          minHeight: "462px",
+          backgroundColor: "#ffffff",
+          display: "flex",
+          justifyContent: "space-between",
+          flexWrap: "wrap",
+          padding: "22px 22px 22px 50px",
+          borderRadius: "12px",
+          marginTop: "60px",
+          boxSizing: "border-box",
+
+          boxShadow:
+            "0px 6.6501px 5.32008px 0px rgba(126, 42, 234, 0.03), 0px 12.52155px 10.01724px 0px rgba(126, 42, 234, 0.04), 0px 22.33631px 17.86905px 0px rgba(126, 42, 234, 0.04)",
+        }}
+      >
+        <Box
+          sx={{
+            height: "70%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-around",
+            paddingTop: "26px",
+          }}
+        >
+          <Typography
+            variant="h6"
+            fontSize={"36px"}
+            lineHeight={"42.66px"}
+            maxWidth={"491px"}
+          >
+            {header}
+          </Typography>
+          <Box
+            sx={{
+              maxWidth: "416px",
+              marginTop: "19px",
+            }}
+          >
+            <Typography fontSize={"18px"} lineHeight={"21px"} color={"#4D4D4D"}>
+              {text}
+            </Typography>
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            width: "100%",
+            maxWidth: "550px",
+          }}
+        >
+          <Box
+            component={"img"}
+            src={image}
+            sx={{
+              width: "100%",
+              height: "418px",
+              backgroundColor: "#c8dade",
+              borderRadius: "12px",
+            }}
+          />
+        </Box>
+      </Box>
+    </Fade>
+  );
+};

src/pages/Landing/HowToUse.tsx

@@ -1,11 +1,14 @@
-import React from "react";
+import React, { useState } from "react";
 import Box from "@mui/material/Box";
-import { Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Fade, Typography, Zoom, useMediaQuery, useTheme } from "@mui/material";
 import SectionStyled from "./SectionStyled";
 import Link from "@mui/material/Link";
 import { styled } from "@mui/material/styles";
 import Notebook from "../../assets/LandingPict/notebook";
 import BigBlock from "./images/bigblock.png";
+import businessTasks2 from "./images/businessTasks2.png";
+import businessTasks3 from "./images/businessTasks3.png";
+import businessTasks4 from "./images/businessTasks4.png";
 import Button from "@mui/material/Button";
 // import Note from './image/note.png'
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
@@ -13,6 +16,12 @@ import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 // import CalendarW from './image/calendar-W.svg'
 // import CalendarP from './image/calendar-P.svg'
 import CalendarIcon from "../../assets/LandingPict/calendarIcon";
+import { PieСhartIcon } from "@icons/PieСhartIcon";
+import { SegmentationIcon } from "@icons/SegmentationIcon";
+import { TestingIcon } from "@icons/TestingIcon";
+import { EcommerceIcon } from "@icons/EcommerceIcon";
+import { DesktopQuizCard } from "./DesktopQuizCard";
+import { MobileQuizCard } from "./MobileQuizCard";
 
 // const BoxUse = styled('div')(({ theme }) => ({
 //     [theme.breakpoints.down('md')]: {
@@ -35,6 +44,32 @@ const BoxQuiz = styled("div")(({ theme }) => ({
   },
 }));
 
+const businessTasks = {
+  research: {
+    header: "Исследуйте аудиторию и проверяйте гипотезы",
+    text: "Опросник помогает проверять гипотезы и принимать грамотные решения основанные на данных. Создавайте опросы, собирайте обратную связь и анализируйте ответы в удобной аналитике в личном кабинете. ",
+    image: BigBlock,
+  },
+  segmentation: {
+    header:
+      "Лучше узнайте свою аудиторию, сегментируйте и собирайте заявки с помощью квиза",
+    text: "Квиз легко создать самому за 10 минут: настроить логику вопросов, результаты и получить готовую ссылку.",
+    image: businessTasks2,
+  },
+  testing: {
+    header:
+      "Создавайте интерактивные тесты, показывайте правильные и неправильные ответы",
+    text: "Тест в игровой форме увеличит вовлеченность пользователей. Создать его легко: задайте вопрос и отметьте правильные варианты ответов.",
+    image: businessTasks3,
+  },
+  eсommerce: {
+    header:
+      "Консультируйте клиентов по ассортименту и помогите определиться с выбором",
+    text: "Тест в игровой форме увеличит вовлеченность пользователей. Создать его легко: задайте вопрос и отметьте правильные варианты ответов.",
+    image: businessTasks4,
+  },
+};
+
 function Quiz() {
   return (
     <BoxQuiz
@@ -127,12 +162,19 @@ export default function Component() {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+  const [task, setTask] = useState<
+    "research" | "segmentation" | "testing" | "eсommerce"
+  >("research");
+  const [open, setOpen] = useState<boolean>(false);
   return (
     <SectionStyled
       tag={"section"}
       bg={"#f2f3f7"}
       mwidth={"1160px"}
-      sxsect={{ minHeight: "809px", alignItems: "flex-start" }}
+      sxsect={{
+        minHeight: isMobile ? "auto" : "809px",
+        alignItems: "flex-start",
+      }}
       sxcont={{
         display: "flex",
         flexDirection: "column",
@@ -256,162 +298,263 @@ export default function Component() {
             Изящное решение исследовательских и бизнес-задач
           </Typography>
         </Box>
-        {/*<Box*/}
+        {!isTablet && (
-        {/*    sx={{*/}
-        {/*        display: 'flex',*/}
-        {/*        justifyContent: 'space-between',*/}
-        {/*        width: '100%',*/}
-        {/*        flexWrap: 'wrap',*/}
-        {/*        marginTop: '60px',*/}
-        {/*    }}*/}
-        {/*>*/}
-        {/*    <Button*/}
-        {/*            sx={{*/}
-        {/*                width: '275px',*/}
-        {/*                height: '66px',*/}
-        {/*                borderRadius: '12px',*/}
-        {/*                display: 'flex',*/}
-        {/*                alignItems: 'center',*/}
-        {/*                justifyContent: 'space-around',*/}
-        {/*                paddingRight: '77px',*/}
-        {/*                textTransform: 'none',*/}
-        {/*                backgroundColor: '#7e2aea',*/}
-        {/*                color: '#ffffff',*/}
-        {/*            }}*/}
-        {/*    >*/}
-        {/*        <CalendarIcon/>*/}
-        {/*        <Typography>Исследования</Typography>*/}
-        {/*    </Button>*/}
-        {/*    <Button*/}
-        {/*        sx={{*/}
-        {/*            width: '275px',*/}
-        {/*            height: '66px',*/}
-        {/*            backgroundColor: '#ffffff',*/}
-        {/*            borderRadius: '12px',*/}
-        {/*            display: 'flex',*/}
-        {/*            alignItems: 'center',*/}
-        {/*            justifyContent: 'space-around',*/}
-        {/*            paddingRight: '77px',*/}
-        {/*            textTransform: 'none',*/}
-        {/*            color: '#4D4D4D',*/}
-        {/*        }}*/}
-        {/*        //variant='template'*/}
-        {/*        >*/}
-        {/*        <CalendarIcon/>*/}
-        {/*        <Typography>Сегментация</Typography>*/}
-        {/*    </Button>*/}
-        {/*    <Button*/}
-        {/*        sx={{*/}
-        {/*            width: '275px',*/}
-        {/*            height: '66px',*/}
-        {/*            backgroundColor: '#ffffff',*/}
-        {/*            borderRadius: '12px',*/}
-        {/*            display: 'flex',*/}
-        {/*            alignItems: 'center',*/}
-        {/*            justifyContent: 'space-around',*/}
-        {/*            paddingRight: '77px',*/}
-        {/*            textTransform: 'none',*/}
-        {/*            color: '#4D4D4D',*/}
-        {/*        }}*/}
-        {/*        //variant='template'*/}
-        {/*    >*/}
-        {/*        <CalendarIcon/>*/}
-        {/*        <Typography>Тестирование</Typography>*/}
-        {/*    </Button>*/}
-        {/*    <Button*/}
-        {/*        //variant='template'*/}
-        {/*        sx={{*/}
-        {/*            width: '275px',*/}
-        {/*            height: '66px',*/}
-        {/*            backgroundColor: '#ffffff',*/}
-        {/*            borderRadius: '12px',*/}
-        {/*            display: 'flex',*/}
-        {/*            alignItems: 'center',*/}
-        {/*            justifyContent: 'space-around',*/}
-        {/*            paddingRight: '77px',*/}
-        {/*            textTransform: 'none',*/}
-        {/*            color: '#4D4D4D',*/}
-        {/*        }}*/}
-        {/*    >*/}
-        {/*        <CalendarIcon/>*/}
-        {/*        <Typography>E-commerce</Typography>*/}
-        {/*    </Button>*/}
-        {/*</Box>*/}
           <Box
             sx={{
-            width: "100%",
-            minHeight: "462px",
-            backgroundColor: "#ffffff",
               display: "flex",
               justifyContent: "space-between",
-            flexWrap: "wrap",
+              width: "100%",
-            padding: isMobile
+              gap: "20px",
-              ? "0 27px 22px 20px"
+              marginTop: "60px",
-              : isTablet
-                ? "20px"
-                : "22px 22px 22px 50px",
-            borderRadius: "12px",
-            marginTop: isMobile ? "35px" : "60px",
-            boxSizing: "border-box",
-            boxShadow:
-              "0px 6.6501px 5.32008px 0px rgba(126, 42, 234, 0.03), 0px 12.52155px 10.01724px 0px rgba(126, 42, 234, 0.04), 0px 22.33631px 17.86905px 0px rgba(126, 42, 234, 0.04)",
             }}
           >
-          <Box
+            <Button
+              onClick={() => setTask("research")}
               sx={{
-              height: "70%",
+                width: "275px",
+                height: "66px",
+                borderRadius: "12px",
                 display: "flex",
-              flexDirection: "column",
+                alignItems: "center",
-              justifyContent: "space-around",
+                gap: "15px",
-              paddingTop: "26px",
+                justifyContent: "flex-start",
-              paddingLeft: isMobile ? undefined : isTablet ? "30px" : undefined,
+
-            }}
+                textTransform: "none",
-          >
+                backgroundColor: task !== "research" ? "white" : "#7e2aea",
-            <Typography
+                color: task !== "research" ? "black" : "#ffffff",
-              variant="h6"
-              fontSize={"36px"}
-              lineHeight={"42.66px"}
-              maxWidth={"455px"}
-            >
-              Исследуйте аудиторию и проверяйте гипотезы
-            </Typography>
-            <Box
-              sx={{
-                maxWidth: isTablet ? "100%" : "416px",
-                marginTop: "19px",
-              }}
-            >
-              <Typography
-                fontSize={"18px"}
-                lineHeight={"21px"}
-                color={"#4D4D4D"}
-              >
-                Опросник помогает проверять гипотезы и принимать грамотные
-                решения основанные на данных. Создавайте опросы, собирайте
-                обратную связь и анализируйте ответы в удобной аналитике в
-                личном кабинете.
-              </Typography>
-            </Box>
-          </Box>
-          <Box
-            sx={{
-              width: "100%",
-              maxWidth: isTablet ? "100%" : "550px",
-              marginTop: isMobile ? undefined : isTablet ? "42px" : undefined,
               }}
             >
               <Box
-              component={"img"}
-              src={BigBlock}
                 sx={{
-                width: "100%",
+                  borderRadius: "8px",
-                height: isMobile ? "228px" : isTablet ? "671px" : "418px",
+                  minWidth: "36px",
-                backgroundColor: "#c8dade",
+                  height: "36px",
-                borderRadius: "12px",
+                  background: task !== "research" ? "#7E2AEA" : "white",
+                  display: " flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <PieСhartIcon
+                  style={{
+                    color: task !== "research" ? "white" : "#7E2AEA",
+                    fontSize: "24px",
                   }}
                 />
               </Box>
+
+              <Typography>Исследования</Typography>
+            </Button>
+            <Button
+              onClick={() => setTask("segmentation")}
+              sx={{
+                width: "275px",
+                height: "66px",
+                borderRadius: "12px",
+                display: "flex",
+                gap: "15px",
+                alignItems: "center",
+                justifyContent: "flex-start",
+
+                textTransform: "none",
+                backgroundColor: task !== "segmentation" ? "white" : "#7e2aea",
+                color: task !== "segmentation" ? "black" : "#ffffff",
+              }}
+            >
+              <Box
+                sx={{
+                  borderRadius: "8px",
+                  minWidth: "36px",
+                  height: "36px",
+                  background: task !== "segmentation" ? "#7E2AEA" : "white",
+                  display: " flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <SegmentationIcon
+                  style={{
+                    color: task !== "segmentation" ? "white" : "#7E2AEA",
+                    fontSize: "24px",
+                  }}
+                />
               </Box>
+
+              <Typography>Сегментация</Typography>
+            </Button>
+            <Button
+              onClick={() => setTask("testing")}
+              sx={{
+                width: "275px",
+                height: "66px",
+                borderRadius: "12px",
+                display: "flex",
+                gap: "15px",
+                alignItems: "center",
+                justifyContent: "flex-start",
+                textTransform: "none",
+                backgroundColor: task !== "testing" ? "white" : "#7e2aea",
+                color: task !== "testing" ? "black" : "#ffffff",
+              }}
+            >
+              <Box
+                sx={{
+                  borderRadius: "8px",
+                  minWidth: "36px",
+                  height: "36px",
+                  background: task !== "testing" ? "#7E2AEA" : "white",
+                  display: " flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <TestingIcon
+                  style={{
+                    color: task !== "testing" ? "white" : "#7E2AEA",
+                    fontSize: "24px",
+                  }}
+                />
+              </Box>
+
+              <Typography>Тестирование</Typography>
+            </Button>
+            <Button
+              onClick={() => setTask("eсommerce")}
+              sx={{
+                width: "275px",
+                height: "66px",
+                borderRadius: "12px",
+                display: "flex",
+                gap: "15px",
+                alignItems: "center",
+                justifyContent: "flex-start",
+
+                textTransform: "none",
+                backgroundColor: task !== "eсommerce" ? "white" : "#7e2aea",
+                color: task !== "eсommerce" ? "black" : "#ffffff",
+              }}
+            >
+              <Box
+                sx={{
+                  borderRadius: "8px",
+                  minWidth: "36px",
+                  height: "36px",
+                  background: task !== "eсommerce" ? "#7E2AEA" : "white",
+                  display: " flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <EcommerceIcon
+                  style={{
+                    color: task !== "eсommerce" ? "white" : "#7E2AEA",
+                    fontSize: "24px",
+                  }}
+                />
+              </Box>
+              <Typography>E-commerce</Typography>
+            </Button>
+          </Box>
+        )}
+
+        {isTablet ? (
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "30px",
+              mt: isMobile ? "40px" : "50px",
+            }}
+          >
+            <MobileQuizCard
+              header={businessTasks.research.header}
+              image={businessTasks.research.image}
+              text={businessTasks.research.text}
+              textIcon="Исследования"
+              icon={
+                <PieСhartIcon
+                  style={{
+                    color: "white",
+                    fontSize: "24px",
+                  }}
+                />
+              }
+            />
+
+            <MobileQuizCard
+              header={businessTasks.segmentation.header}
+              image={businessTasks.segmentation.image}
+              text={businessTasks.segmentation.text}
+              textIcon="Сегментация"
+              icon={
+                <SegmentationIcon
+                  style={{
+                    color: "white",
+                    fontSize: "24px",
+                  }}
+                />
+              }
+            />
+            <MobileQuizCard
+              header={businessTasks.testing.header}
+              image={businessTasks.testing.image}
+              text={businessTasks.testing.text}
+              textIcon="Тестирование"
+              icon={
+                <TestingIcon
+                  style={{
+                    color: "white",
+                    fontSize: "24px",
+                  }}
+                />
+              }
+            />
+            <MobileQuizCard
+              header={businessTasks.eсommerce.header}
+              image={businessTasks.eсommerce.image}
+              text={businessTasks.eсommerce.text}
+              textIcon="E-commerce"
+              icon={
+                <EcommerceIcon
+                  style={{
+                    color: "white",
+                    fontSize: "24px",
+                  }}
+                />
+              }
+            />
+          </Box>
+        ) : (
+          <>
+            <DesktopQuizCard
+              isOpen={task === "research"}
+              header={businessTasks.research.header}
+              image={businessTasks.research.image}
+              text={businessTasks.research.text}
+            />
+
+            <DesktopQuizCard
+              isOpen={task === "segmentation"}
+              header={businessTasks.segmentation.header}
+              image={businessTasks.segmentation.image}
+              text={businessTasks.segmentation.text}
+            />
+
+            <DesktopQuizCard
+              isOpen={task === "testing"}
+              header={businessTasks.testing.header}
+              image={businessTasks.testing.image}
+              text={businessTasks.testing.text}
+            />
+
+            <DesktopQuizCard
+              isOpen={task === "eсommerce"}
+              header={businessTasks.eсommerce.header}
+              image={businessTasks.eсommerce.image}
+              text={businessTasks.eсommerce.text}
+            />
+          </>
+        )}
       </Box>
     </SectionStyled>
   );

src/pages/Landing/MobileQuizCard.tsx

@@ -0,0 +1,131 @@
+import {
+  Box,
+  Slide,
+  Typography,
+  useMediaQuery,
+  useTheme,
+  Zoom,
+} from "@mui/material";
+import { FC, ReactNode, useRef, useState } from "react";
+
+interface Iprops {
+  header: string;
+  image: string;
+  text: string;
+  textIcon: string;
+  icon: ReactNode;
+}
+
+export const MobileQuizCard: FC<Iprops> = ({
+  header,
+  image,
+  text,
+  icon,
+  textIcon,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLElement>(null);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+
+  const handleChange = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  return (
+    <Box
+      ref={containerRef}
+      onClick={handleChange}
+      sx={{
+        width: "100%",
+        minHeight: isOpen ? "462px" : "auto",
+        backgroundColor: "#ffffff",
+        display: "flex",
+        justifyContent: "space-between",
+        flexWrap: "wrap",
+        padding: isMobile ? "15px" : "20px",
+        borderRadius: "12px",
+        boxSizing: "border-box",
+        boxShadow:
+          "0px 6.6501px 5.32008px 0px rgba(126, 42, 234, 0.03), 0px 12.52155px 10.01724px 0px rgba(126, 42, 234, 0.04), 0px 22.33631px 17.86905px 0px rgba(126, 42, 234, 0.04)",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          gap: "15px",
+        }}
+      >
+        <Box
+          sx={{
+            borderRadius: "8px",
+            width: "36px",
+            height: "36px",
+            background: "#7E2AEA",
+            display: " flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {icon}
+        </Box>
+        <Typography>{textIcon}</Typography>
+      </Box>
+      {isOpen && (
+        <Box
+          sx={{
+            height: "70%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-around",
+            mt: "14px",
+          }}
+        >
+          <Box>
+            <Typography
+              variant="h6"
+              fontSize={isMobile ? "24px" : "36px"}
+              lineHeight={isMobile ? "normal" : "42.66px"}
+              maxWidth={"491px"}
+            >
+              {header}
+            </Typography>
+            <Box
+              sx={{
+                maxWidth: "100%",
+                marginTop: "20px",
+              }}
+            >
+              <Typography
+                fontSize={"18px"}
+                lineHeight={"21px"}
+                color={"#4D4D4D"}
+              >
+                {text}
+              </Typography>
+            </Box>
+          </Box>
+          <Box
+            sx={{
+              width: "100%",
+              maxWidth: "100%",
+              marginTop: "30px",
+            }}
+          >
+            <Box
+              component={"img"}
+              src={image}
+              sx={{
+                width: "100%",
+                height: isMobile ? "228px" : "671px",
+                backgroundColor: "#c8dade",
+                borderRadius: "12px",
+              }}
+            />
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};

src/pages/Landing/WhatTheFeatures.tsx

@@ -11,10 +11,12 @@ import Desktop4 from "./images/Frame 1171274552-3.png";
 import Desktop5 from "./images/Frame 1171274552-4.png";
 import Desktop6 from "./images/Frame 1171274552-5.png";
 import Desktop7 from "./images/Frame 1171274552-6.png";
+import LandingImg from "./images/LandingImg.png";
 
 interface Props {
   children: React.ReactNode;
   image: string;
+  sx?: SxProps;
 }
 
 function BoxFich(props: Props) {
@@ -33,6 +35,7 @@ function BoxFich(props: Props) {
         flexDirection: "column",
         justifyContent: isMobile ? "space-between" : undefined,
         height: isMobile ? "450px" : undefined,
+        ...props.sx,
       }}
     >
       <Box
@@ -55,6 +58,7 @@ function BoxFich(props: Props) {
           display: "flex",
           justifyContent: "end",
           alignItems: "end",
+          mt: "auto",
         }}
       >
         <img src={props.image} width={"96%"} />
@@ -129,6 +133,7 @@ export default function Component() {
         <BoxFich image={Desktop1}>
           <Box sx={{ maxWidth: isTabletOnly ? "244px" : "174px" }}>
             <Typography
+              variant={"h3"}
               sx={{
                 color: "#7e2aea",
                 fontSize: "24px",

src/pages/Questions/DataOptions/settingData.tsx

@@ -96,6 +96,7 @@ export default function SettingsData({ question }: SettingsDataProps) {
           Настройки вопросов
         </Typography>
         <CustomCheckbox
+          dataCy="checkbox-optional-question"
           sx={{ mr: isMobile ? "0px" : "16px" }}
           label={"Необязательный вопрос"}
           checked={!question.content.required}

src/pages/Questions/DraggableList/QuestionPageCard.tsx

@@ -133,6 +133,7 @@ export default function QuestionsPageCard({
             }}
           >
             <TextField
+              id="questionTitle"
               defaultValue={question.title}
               placeholder={"Заголовок вопроса"}
               onChange={({ target }: { target: HTMLInputElement }) =>

src/pages/Questions/DropDown/settingDropDown.tsx

@@ -126,6 +126,7 @@ export default function SettingDropDown({ question }: SettingDropDownProps) {
             Настройки вопросов
           </Typography>
           <CustomCheckbox
+            dataCy="checkbox-optional-question"
             label={"Необязательный вопрос"}
             checked={!question.content.required}
             handleChange={(e) => {

src/pages/Questions/Emoji/settingEmoji.tsx

@@ -95,6 +95,7 @@ export default function SettingEmoji({ question }: SettingEmojiProps) {
           Настройки вопросов
         </Typography>
         <CustomCheckbox
+          dataCy="checkbox-optional-question"
           sx={{ mr: isMobile ? "0px" : "16px" }}
           label={"Необязательный вопрос"}
           checked={!question.content.required}

src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx

@@ -128,6 +128,7 @@ export default function SettingOptionsAndPict({
             Настройки вопросов
           </Typography>
           <CustomCheckbox
+            dataCy="checkbox-optional-question"
             sx={{ mr: isMobile ? "0px" : "16px" }}
             label={"Необязательный вопрос"}
             checked={!question.content.required}

src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx

@@ -210,6 +210,7 @@ export default function SettingOpytionsPict({
             Настройки вопросов
           </Typography>
           <CustomCheckbox
+            dataCy="checkbox-optional-question"
             sx={{ alignItems: isMobile ? "flex-start" : "" }}
             label={"Необязательный вопрос"}
             checked={!question.content.required}

src/pages/Questions/OwnTextField/settingTextField.tsx

@@ -160,6 +160,7 @@ export default function SettingTextField({ question }: SettingTextFieldProps) {
                     }}
                 /> */}
         <CustomCheckbox
+          dataCy="checkbox-optional-question"
           sx={{
             display: isMobile ? "flex" : "block",
             mr: isMobile ? "0px" : "16px",

src/pages/Questions/PageOptions/PageOptions.tsx

@@ -80,6 +80,7 @@ export default function PageOptions({ disableInput, question }: Props) {
           }}
         >
           <CustomTextField
+            id="addText"
             placeholder={"Можно добавить текст"}
             text={question.content.text}
             onChange={({ target }) => setText(target.value)}

src/pages/Questions/RatingOptions/settingRating.tsx

@@ -167,6 +167,7 @@ export default function SettingSlider({ question }: SettingSliderProps) {
           Настройки вопросов
         </Typography>
         <CustomCheckbox
+          dataCy="checkbox-optional-question"
           sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
           label={"Необязательный вопрос"}
           checked={!question.content.required}

src/pages/Questions/SliderOptions/settingSlider.tsx

@@ -95,6 +95,7 @@ export default function SettingSlider({ question }: SettingSliderProps) {
           Настройки вопросов
         </Typography>
         <CustomCheckbox
+          dataCy="checkbox-optional-question"
           sx={{
             mr: isMobile ? "0px" : "16px",
             alignItems: isMobile ? "flex-end" : "center",

src/pages/Questions/UploadFile/settingUpload.tsx

@@ -62,6 +62,7 @@ export default function SettingsUpload({ question }: SettingsUploadProps) {
                 }}
             /> */}
       <CustomCheckbox
+        dataCy="checkbox-optional-question"
         sx={{
           display: isMobile ? "flex" : "block",
           mr: isMobile ? "0px" : "16px",

src/pages/Questions/answerOptions/responseSettings.tsx

@@ -119,6 +119,7 @@ export default function ResponseSettings({ question }: Props) {
           Настройки вопросов
         </Typography>
         <CustomCheckbox
+          dataCy="checkbox-optional-question"
           sx={{ mr: isMobile ? "0px" : "16px" }}
           label={"Необязательный вопрос"}
           checked={!question.content.required}

src/pages/ResultPage/DescriptionForm/DescriptionForm.tsx

@@ -50,7 +50,11 @@ export const DescriptionForm = () => {
             mb: "19px",
           }}
         >
-          <CustomTextField placeholder="Заголовок вопроса" text={""} />
+          <CustomTextField
+            id="questionTitle"
+            placeholder="Заголовок вопроса"
+            text={""}
+          />
           <IconButton>
             <ExpandMoreIcon />
           </IconButton>

src/pages/ResultPage/cards/EmailSettingsCard.tsx

@@ -119,6 +119,7 @@ export const EmailSettingsCard = ({ quizExpand }: Props) => {
             Тема письма
           </Typography>
           <TextField
+            id="questionTitle"
             value={quiz.config.resultInfo.theme}
             placeholder={"Заголовок вопроса"}
             onChange={({ target }: { target: HTMLInputElement }) => {

src/pages/ViewPublicationPage/Footer.tsx

@@ -375,6 +375,7 @@ export const Footer = ({
           {isMobileMini ? "←" : "← Назад"}
         </Button>
         <Button
+          id="buttonFurther"
           disabled={disableNextButton}
           variant="contained"
           sx={{ fontSize: "16px", padding: "10px 15px" }}

src/pages/ViewPublicationPage/StartPageViewPublication.tsx

@@ -127,6 +127,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                 />
               )}
               <Typography
+                data-cy="company"
                 sx={{
                   fontSize: "14px",
                   color:
@@ -167,6 +168,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
               }}
             >
               <Typography
+                data-cy="heading"
                 sx={{
                   fontWeight: "bold",
                   fontSize: "26px",
@@ -188,6 +190,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                 {quiz.name}
               </Typography>
               <Typography
+                data-cy="text"
                 sx={{
                   fontSize: "16px",
                   m: "16px 0",
@@ -211,6 +214,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                 }
               >
                 <Button
+                  data-cy="startpage-button"
                   variant="contained"
                   sx={{
                     fontSize: "16px",
@@ -244,6 +248,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                   isMobileDevice ? (
                     <Link href={`tel:${quiz.config.info.phonenumber}`}>
                       <Typography
+                        data-cy="phonenumber"
                         sx={{
                           fontSize: "16px",
                           color: theme.palette.primary.main,
@@ -255,6 +260,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                   ) : (
                     <ButtonBase onClick={handleCopyNumber}>
                       <Typography
+                        data-cy="phonenumber"
                         sx={{
                           fontSize: "16px",
                           color: theme.palette.primary.main,
@@ -266,12 +272,14 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                   )
                 ) : (
                   <Typography
+                    data-cy="phonenumber"
                     sx={{ fontSize: "16px", color: theme.palette.primary.main }}
                   >
                     {quiz.config.info.phonenumber}
                   </Typography>
                 )}
                 <Typography
+                  data-cy="legalInformation"
                   sx={{
                     width: "100%",
                     overflowWrap: "break-word",

src/pages/createQuize/QuizCard.tsx

@@ -69,6 +69,7 @@ export default function QuizCard({
 
   return (
     <Box
+      data-cy="quiz-card"
       sx={{
         display: "flex",
         flexDirection: "column",
@@ -207,6 +208,7 @@ export default function QuizCard({
                             Копировать
                         </Button> */}
             <Button
+              id="deleteButton"
               sx={{
                 display: "block",
                 width: "100%",

src/pages/main.tsx

@@ -177,6 +177,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
               {quiz?.status === "start" &&
                 (!isLinkButton ? (
                   <Box
+                    data-cy="link-test"
                     component={Link}
                     sx={{
                       whiteSpace: "nowrap",
@@ -193,6 +194,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
                   </Box>
                 ) : (
                   <Box
+                    data-cy="link-test"
                     component={Link}
                     sx={{
                       cursor: "pointer",
@@ -215,6 +217,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
               {/* Маленькая кнопка ссылки */}
               {isMobile && quiz?.status === "start" && (
                 <Box
+                  data-cy="link-test"
                   component={Link}
                   sx={{
                     cursor: "pointer",
@@ -237,6 +240,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
               {currentStep <= 1 && (
                 <Box sx={{ textAlign: "end", width: "100%" }}>
                   <IconButton
+                    data-cy="button-preview"
                     onClick={toggleQuizPreview}
                     sx={{
                       pointerEvents: "auto",

src/pages/startPage/StartPageSettings.tsx

@@ -126,7 +126,7 @@ export default function StartPageSettings() {
               Дизайн
             </Typography>
           </Button>
-          <Button onClick={() => setFormState("content")}>
+          <Button id="contentButton" onClick={() => setFormState("content")}>
             <Typography
               sx={{
                 fontWeight: 500,
@@ -616,6 +616,7 @@ export default function StartPageSettings() {
                 Заголовок
               </Typography>
               <CustomTextField
+                id="headingInput"
                 placeholder="Имя заголовка опроса для подбора табуретки"
                 value={quiz.name}
                 onChange={(e) =>
@@ -636,6 +637,7 @@ export default function StartPageSettings() {
                 Текст
               </Typography>
               <CustomTextField
+                id="textInput"
                 placeholder="Внимательно заполняйте поля ответов"
                 value={quiz.config.startpage.description}
                 onChange={(e) =>
@@ -656,6 +658,7 @@ export default function StartPageSettings() {
                 Текст кнопки
               </Typography>
               <CustomTextField
+                id="buttonTextInput"
                 placeholder="Начать опрос"
                 value={quiz.config.startpage.button}
                 onChange={(e) =>
@@ -676,6 +679,7 @@ export default function StartPageSettings() {
                 Телефон
               </Typography>
               <CustomTextField
+                id="phoneInput"
                 placeholder="8-800-000-00-00"
                 type="number"
                 value={quiz.config.info.phonenumber}
@@ -707,6 +711,7 @@ export default function StartPageSettings() {
                 Название или слоган компании
               </Typography>
               <CustomTextField
+                id="companyInput"
                 placeholder="Только лучшее"
                 value={quiz.config.info.orgname}
                 onChange={(e) =>
@@ -727,6 +732,7 @@ export default function StartPageSettings() {
                 Сайт
               </Typography>
               <CustomTextField
+                id="websiteInput"
                 placeholder="https://mysite.com"
                 value={quiz.config.info.site}
                 onChange={(e) =>
@@ -747,6 +753,7 @@ export default function StartPageSettings() {
                 Юридическая информация
               </Typography>
               <CustomTextField
+                id="legalInformationInput"
                 placeholder="Данные наших документов"
                 value={quiz.config.info.law}
                 onChange={(e) =>

src/ui_kit/CustomTextField.tsx

@@ -13,6 +13,7 @@ import type { InputProps, SxProps, Theme } from "@mui/material";
 
 interface CustomTextFieldProps {
   placeholder: string;
+  id?: string;
   value?: string;
   error?: string;
   emptyError?: boolean;
@@ -31,6 +32,7 @@ interface CustomTextFieldProps {
 
 export default function CustomTextField({
   placeholder,
+  id,
   value = "",
   onChange,
   onKeyDown,
@@ -101,6 +103,7 @@ export default function CustomTextField({
         </InputLabel>
       )}
       <Input
+        id={id}
         defaultValue={text}
         fullWidth
         value={inputValue}

src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx

@@ -86,6 +86,7 @@ export default function QuizPreviewLayout() {
                 />
               )}
               <Typography
+				data-cy="company"
                 sx={{
                   fontSize: "12px",
                   color:
@@ -115,6 +116,7 @@ export default function QuizPreviewLayout() {
               }}
             >
               <Typography
+				data-cy="heading"
                 sx={{
                   fontWeight: "bold",
                   color:
@@ -126,6 +128,7 @@ export default function QuizPreviewLayout() {
                 {quiz.name}
               </Typography>
               <Typography
+				data-cy="text"
                 sx={{
                   fontSize: "12px",
                   color:
@@ -138,6 +141,7 @@ export default function QuizPreviewLayout() {
               </Typography>
               <Box>
                 <Button
+                  data-cy="startpage-button"
                   variant="contained"
                   sx={{
                     fontSize: "16px",
@@ -166,6 +170,7 @@ export default function QuizPreviewLayout() {
                 ) : (
                   <ButtonBase onClick={handleCopyNumber}>
                     <Typography
+                      data-cy="phonenumber"
                       sx={{
                         fontSize: "16px",
                         color: theme.palette.primary.main,
@@ -177,6 +182,7 @@ export default function QuizPreviewLayout() {
                 )
               ) : (
                 <Typography
+				  data-cy="phonenumber"
                   sx={{
                     fontSize: "16px",
                     color:
@@ -189,6 +195,7 @@ export default function QuizPreviewLayout() {
                 </Typography>
               )}
               <Typography
+				data-cy="legalInformation"
                 sx={{
                   fontSize: "12px",
                   color:

src/ui_kit/Toolbars/ButtonRecallQuiz.tsx

@@ -40,6 +40,7 @@ export const ButtonRecallQuiz = () => {
 
   return (
     <Button
+      data-cy="publish-button"
       variant="contained"
       sx={{
         fontSize: "14px",