Розроблення онлайн-системи для допомоги у тестуванні вебсторінок з використанням розширення браузера - Питлак, Андрій Васильович; Pytlak, Andrii Vasylovych (Національний університет "Львівська політехніка", 2024)
У процесі розробки вебзастосунків надзвичайно важливо своєчасно виявляти помилки інтерфейсу та поведінки сторінок, що безпосередньо впливає на якість продукту та задоволеність користувачів. Одним із ключових етапів забезпечення якості є тестування, зокрема ручне, яке часто супроводжується рутинною фіксацією кроків та формуванням звітів про помилки. Такий процес є трудомістким, неформалізованим і залежить від людського чинника. У цьому контексті актуальним є створення інструменту, що спрощує процес ручного тестування вебінтерфейсів, дозволяючи автоматизовано записувати дії користувача, формувати структуровані тест-кейси та генерувати баг-репорти у зручному форматі. Існуючі інструменти або орієнтовані на повністю автоматизоване тестування, або не забезпечують достатньої інтеграції з реальними сценаріями взаємодії користувача. У дипломній роботі проаналізовано специфіку ручного тестування та сформовано функціональні вимоги до системи, яка повинна бути простою у використанні, швидкою у створенні звіту, та інтегрованою у щоденну практику QA-фахівця. Запропоновано архітектуру та реалізовано розширення для браузера Google Chrome, яке дозволяє записувати взаємодії з DOM-елементами, фіксувати події типу введення, натискання, переходів, а також формувати повноцінний звіт із зазначенням заголовку, очікуваного та фактичного результату, і списком дій. Для збереження даних застосовано структуру бази даних із використанням ORM, що дозволяє масштабування та інтеграцію з бекендом. Об’єктом дослідження виступає процес ручного тестування вебінтерфейсів. 5 Предметом дослідження є методи запису дій користувача, генерації тестових сценаріїв та формування звітів про помилки. Метою роботи є створення інструмента, що підвищує ефективність ручного тестування за рахунок автоматизації фіксації кроків та спрощення генерації баг-репортів. Новизна дослідження полягає у поєднанні простоти інтерфейсу з можливістю автоматичного формування сценаріїв і збереженням структурованої інформації у форматі, придатному для аналізу й обміну між членами команди. Практичне значення одержаних результатів полягає у створенні інструмента, який може бути впроваджений у робочі процеси команди тестування для зменшення часу на створення звітів, зниження ймовірності помилок у документації та покращення комунікації між тестувальниками та розробниками. Пояснювальна записка містить п’ятдесят одну сторінку, включає двадцять дві ілюстрації, три таблиці і два додатки.

During the development of web applications, timely detection of interface and behavior-related issues is of critical importance, as it directly affects product quality and user satisfaction. One of the key stages of quality assurance is testing, particularly manual testing, which is often accompanied by routine documentation of user steps and the creation of bug reports. This process is time-consuming, unstructured, and highly dependent on human factors. In this context, the creation of a tool that simplifies the process of manual web interface testing is highly relevant. Such a tool should allow automated recording of user actions, structured test case generation, and convenient bug report creation. Existing tools are either focused on fully automated testing or lack sufficient integration with real-world user interaction scenarios. This thesis analyzes the specifics of manual testing and formulates functional requirements for a system that must be easy to use, fast in generating reports, and seamlessly integrated into the daily workflow of a QA specialist. The proposed solution is a browser extension for Google Chrome that enables recording interactions with DOM elements, capturing input, click, and navigation events, and generating a complete report with a title, expected and actual results, and a list of reproduction steps. A database structure based on an ORM approach is used for data storage, allowing for scalability and backend integration. The object of research is the process of manual testing of web interfaces. The subject of research includes methods for recording user actions, generating test scenarios, and forming structured bug reports. The goal of the thesis is to create a tool that increases the efficiency of manual testing by automating step recording and simplifying the generation of bug reports. 7 The novelty of the study lies in combining a simple and intuitive interface with the capability of automatically forming test scenarios and preserving structured information in a format suitable for analysis and team communication. The practical value of the results is in the development of a tool that can be implemented in real testing workflows to reduce the time needed to document bugs, minimize the likelihood of documentation errors, and improve communication between testers and developers. The explanatory note contains fifty-one pages, includes twenty-two illustrations, three tables and two appendices.
Development of an online system to assist with web pages testing using a browser extension
Keywords: 6.122.00.00; ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ; ТЕСТУВАННЯ; РОЗШИРЕННЯ ДЛЯ БРАУЗЕРА; ІНТЕГРАЦІЯ; ЗВІТ ПРО ПОМИЛКУ; DOM; UX; UI; ЯКІСТЬ ПРОДУКТУ; ВЗАЄМОДІЯ КОРИСТУВАЧА. Перелік використаних джерел: 1. W3C. WebDriver Specification. [Електронний ресурс]. Режим доступу: https://w3c.github.io/webdriver/ 2. W3C Web Accessibility Initiative. Web Content Accessibility Guidelines (WCAG). [Електронний ресурс]. https://www.w3.org/WAI/standards-guidelines/wcag/ 3. Режим доступу: NestJS. Офіційна документація. [Електронний ресурс]. Режим доступу: https://docs.nestjs.com 4. Google Chrome Extensions Documentation. [Електронний ресурс]. Режим доступу: https://developer.chrome.com/docs/extensions/ 5. React – офіційна документація. [Електронний ресурс]. Режим доступу: https://react.dev/; SOFTWARE; TESTING; BROWSER EXTENSION; INTEGRATION; BUG REPORT; DOM; UX; UI; PRODUCT QUALITY; USER INTERACTION. List of used sources: 1. W3C. WebDriver Specification. [Electronic resource]. Resource access mode: https://w3c.github.io/webdriver/ 2. W3C Web Accessibility Initiative. Web Content Accessibility Guidelines (WCAG). [Electronic resource]. Resource https://www.w3.org/WAI/standards-guidelines/wcag/ 3. access mode: NestJS. official documentation. [Electronic resource]. Режим доступу: https://docs.nestjs.com 4. Google Chrome Extensions Documentation. [Electronic resource]. Resource access mode: https://developer.chrome.com/docs/extensions/ 5. React – official documentation. [Electronic resource]. Resource access mode: https://react.dev/