A web source Project.pdf
- 1. A source web Project I had the opportunity to test a web page during a hands-on experience with GoIT company. The project contains the product specifications based on which the test cases were written in TestRail and also the bugs were identified and reported in Jira. Link WebSite: https://qa-autocheck- test.netlify.app/?token=d5fcc3783ba50fcac78b5a5ea8e4d69f6fe51ed8368bc618a58a846ad8b03a63&block=nop6 78917&language=ro&ssid=6414325608a1900a6826f703&cookie_id=df907bd4c3df4c1e9809aa8f4cd942af&block_i d=640b56739ff8027ea86464e0&leeloo_account_id=6414325608a1907a3d26f6fe&utm_source=leeloo&utm_medi um=ref&utm_campaign=FRO5&utm_term=FRO3_1-9 Components and functionality of Product A web resource designed to familiarize you with the basics of HTML&CSS languages. This is intended for users who have no programming knowledge. The web resource consists of ten pages of questions. Each page has a theoretical part, which provides enough information to solve a given task. The web resource is adapted: it works on various devices, operating systems and browsers. HEADER 1. Link to main site In the right corner is placed the logo (link) to the main GoIT website. 2. Navigation menu In the middle is the "Questions" navigation menu to switch between solved tasks: The "left" arrow opens the previous question. The button in the center, which shows the number of the current task and, via a slash "/", the total number of tasks. Clicking on this button opens a solution list. Clicking on the button with the task number in the list opens the page with the task in question. The "right" arrow opens the next task.
- 2. 3. Language menu In the right corner is the language menu. When the "RO" version is highlighted, the content of the page is displayed in Romanian. When the "ENG" symbol is highlighted, the page content is displayed in English. change the language by pressing the version in question. BODY 1. Theory section It contains theory and explanations with examples needed to solve the given task, problem statement and task acceptance criteria. 1.1. "Hide theory and assignments" button at the top of the section When you click on this button, the Theory section closes and the editor window expands to the full width of the page. The button shrinks to an icon with no text.
- 3. 1.2. The title of the theoretical part When you click on the title, the main theoretical part of the theory section closes, only the task and the criteria for accepting the task remain in the section. Repeated clicking expands the theory section to its initial state. 2. Code editor window
- 4. In the Editor window, there is a startup code that must be filled in according to the task to solve it. You can only write code in the gray highlighted line where the cursor is set. The boot code cannot be changed. It is possible to insert characters at the end of blocked lines, but checking for such code will result in a compile error. 3. Check menu It is located between the code editor window and the results section. 3.1. "Check" button When you click on the "Verify" button, a request is sent to the server to verify the code in the editor window. The answer is displayed in the results section. Items that pass the check are shown in green text, otherwise they are shown in red. An example of boot code verification:
- 5. If the code in the editor window passes the check and all items in the results section are displayed in green text, the text on the test button changes to "Next task": Clicking on the "Next task" button opens the page with the next question. 3.2. "Reset" button Intended to return the editor window to its original state. Thus all changes are canceled with a single click. To prevent accidental resetting of the entered code, a modal window is provided with a request to confirm the user's desire to reset the code to its initial state, which appears when the "Reset" button is clicked: When you click on the "Yes" button in the modal window, the window closes, and the code in the editor is reset to its initial state. The modal window can be closed by pressing "No", the gray background or the "Esc" key - the code in the editor window does not change. 3.3. "Hide results section" button When you click the "Hide results section" button, the section closes, the code editor window expands to the full height of the page body, the validation menu moves to the bottom of the page, and the button text changes to "Show results section ".
- 6. When clicking on the button "Show results section", the section expands to its initial state. 4. "Results" section Designed to display code verification results in the editor window. FOOTER In the footer there is a link to the "Privacy Policy". When you click on the text, a modal window opens with information about the privacy policy in the language corresponding to the version chosen in the header. The modal window can be closed by pressing the cross in the upper right corner, the gray background or the "Esc" key.
- 7. Test Cases
- 14. Bug Report