
Master Cypress io v9 for automating modern web apps by building a complete framework from scratch for two React applications, with examples, selectors, runs via the dashboard and CI/CD.
Explore Cypress io, a fast, reliable browser testing tool. Learn its runner and dashboard, API testing, and CI/CD with local or cloud parallel runs.
Explore how Cypress runs inside the browser to execute tests, modify the DOM in real time, and alter network requests and responses with local setup and support for modern frameworks.
Master Cypress features for time-travel debugging with test snapshots and hover-over command inspection. Rely on automatic reloading, in-browser execution, and clear error messages during test runs.
Install Cypress across Windows, macOS, and Linux by setting up node and npm, then create a new npm project. Install Cypress via npm to enable Cypress Dashboard recording.
Open the Cypress project in your code editor and review the package.json dependencies. Run npm install to install Cypress, then launch the Cypress test runner for the first time.
Explore how to organize Cypress test cases in the integration folder, customize the integration path with cypress.json, and run and view tests in the Cypress dashboard.
Master Mocha basics in Cypress io v9 by creating a Mocha test case, using the log command, and running tests in Cypress after cleaning the integration folder.
Practice adding a second mocha test case in Cypress using an arrow function, name the test, and print 'I love Cyprus' to confirm two tests appear in the runner.
Learn to group related test cases into a mocha test suite using the describe function, move tests inside the suite, and create multiple suites within one file.
Use Mocha hooks to remove code duplication by starting the server in before, killing it in after, and running login and navigation steps before each test across two test cases.
Learn how to enable Cypress autocomplete by adding the triple-slash reference to Cypress at the top of your JavaScript file. Save to see the editor's code completion and auto-suggestions.
Learn how to use Cypress visit command to open websites, local hosts, and email files, configure a base URL, and observe automatic page load waits and status handling.
Use Cypress viewport to test a website at different sizes, with width height or preconfigured devices like MacBook Pro 15 and iPhone X, running tests for sizes via array.
Learn how to run your Cypress tests on different browsers, including Chrome and Firefox, by installing targeted browsers and selecting them in the Cypress runner.
Learn how automation testing uses element discovery, actions, and assertions with Cypress, focusing on the get command, its retry behavior, and selector-based element lookup.
Download the email file, place it in the Cypress folder, and configure the visit command to open it in the Cypress runner to learn selectors.
Explore selecting elements by tag name in Cypress, using get to target headers, observe highlighting and timeouts, and understand why tag-based selectors fail when multiple elements share the tag.
Learn to locate elements in Cypress by their ID, using #ID selectors and combined tag plus ID queries, and see how changing the ID matches different elements.
Find elements by class name using dot notation in Cypress, including single and multiple classes, and combine selectors like header one and another class, without spaces between selectors.
Learn to select elements in Cypress with parent and child selectors, targeting a single item by its unique class inside a parent list, using the children command.
Learn to locate elements using the Cypress find command, navigating grandparent and descendant relationships, and compare it with children for selecting nested elements.
Explore selecting elements with identical selectors in Cypress by using get with tag li to find all items, then apply first, last, and eq to target specific elements by index.
Filter after get to select elements with a Web class from a list, filtering course items to reveal web courses and learn index-based selection.
Discover how to select elements using their siblings in Cypress v9, leveraging next, next all, next until, previous, previous all, and previous until to navigate sibling elements.
Learn how to find elements with text using the contains command in Cypress, including case sensitivity and when this method is handy for selecting links like selenium course.
Learn to select elements by any attribute in Cypress using [attribute='value'] selectors. The lesson shows adding a test attribute to elements and using it for stable interactions across CI.
Master how Cypress io v9 manages element find timeouts, defaulting to four seconds, and how to extend it with default command timeout or per-command options.
Master the Cypress runner selectors playground to generate the best selectors by hovering over elements, copying the full line, and defaulting to data attributes to speed up automated tests.
Learn the Cypress click command: use get with first or eq(0) to click invoice buttons, handle multiple elements, view before/after snapshots, adjust click position, and force clicks on covered elements.
Use type command to fill inputs by id and type example@gmail.com. Use force on covered fields, set a short delay, and simulate keyboard keys like shift or control.
practice your first end-to-end test in Cypress io v9 by filling the email and password fields and clicking the login button using data-site attributes.
Master selecting options from dropdowns in Cypress io v9 using the select command, targeting the courses select by id and choosing by value or text such as selenium.
Master Cypress io v9 check and uncheck commands to automate radio buttons and checkboxes, selecting single or multiple elements with get and array inputs for robust ui testing.
Learn to automate form input in Cypress by typing into an email field and clearing it, locating the element with the get command by its input e-mail id.
Use Cypress io v9 right-click and double-click commands as extensions to the get command to perform actions on elements and trigger text changes.
Learn Cypress focus and blur commands to interact with a magic input, showing typing cursor on focus and blue background on blur.
Explore using the trigger command in Cypress to simulate click, mouse over, mouse out, and long press on elements, selecting by class and validating visual changes.
Learn how to add should assertions in Cypress to verify elements after commands, such as a button click changing text to downloading, ensuring reliable automation tests.
Learn to use the should command with get to verify an element's text, including exact matches and contains text, and apply contents to check partial matches in larger text.
Explore how Cypress uses the get command to locate elements in the DOM, handle hidden items with display none, and verify visibility with be visible or not be visible to ensure reliable tests.
Learn to verify element classes with Cypress's should have class assertion, confirming that detox elements include mobile when activated, and observe pass/fail outcomes when class names change.
Practice Cypress to assert CSS changes on hover using should with RGB values, verifying the background color changes to red on hover and back to blue when the mouse leaves.
Practice asserting element enabled and disabled states in Cypress io v9, using be enabled and be disabled checks on an input with id input email, and validating test outcomes.
Demonstrates how to assert any element attribute with Cypress using should, e.g., verify an image’s src by its class, and chain have.attr for readable, robust tests.
Verify input values in Cypress io v9 by filling an email field and asserting the value with should have value, ensuring correct input before and after actions.
Practice Cypress io v9 assertions to validate ui states with be checked, be focused, and be selected; verify dropdowns, fries selection, and input focus.
Learn how to use the Cypress URL command to get the current page URL, extend it with assertions, and verify navigation to the login and dashboard pages.
Learn how the title command retrieves the current page title and enables assertions with should and equal, confirming the document title, such as 'Cyprus Tutorials'.
Explore how Cypress v9 handles navigation and page interactions by creating html files, linking an about page, and using site visit, click, and back/forward commands to move through browser history.
Learn to interact with cookies using Cypress: add, get, get all, and clear cookies; inspect cookies in dev tools, assert properties, and manage a token and username cookies.
Use the clock command to mock the date in Cypress tests, enabling time-dependent UI checks. Define a JavaScript date (2019-02-19) and verify the site shows that date.
Wrap a plain JavaScript object with Cypress to enable should assertions on non-Cypress data, such as a car object's color red and model value 2020.
Learn how Cypress uses its and invoke commands to access properties and call methods on returned objects, using a car example to get color, model, year, and text.
Learn how Cypress commands return values and chain with then to access the previous result inside a callback, enabling interactions and assertions on URLs, text, arrays, or objects.
Explore the expect command in Cypress to perform fast assertions, including checking the array length and the first course title, and using then for API response handling.
Discover how to use cy.each in Cypress to perform actions and assertions on every element returned by a selector, iterating over all matches and validating each text contains gigabyte.
Learn how Cypress runs commands in sequence with an engine that enforces synchronous execution, handling page load, element interactions, and assertions, while avoiding non Cypress commands outside then.
Learn how Cypress commands return values, create aliases with as(), and reuse them later with @alias to access elements without using separate variables.
Explore sharing Cypress aliases across test cases by defining them in a before each hook, accessing them with this.aliasName, and using function syntax rather than url functions for compatibility.
Learn how to use the Cypress fixtures folder to store and access test data with JSON, JavaScript, and more, enabling data driven testing via fixture and then commands.
Learn how to use fixtures in Cypress to fill email and password fields by typing values from a fixture file into the inputs with IDs input email and input password.
Learn how to share fixture data across tests by moving cy.fixture into a beforeEach hook and aliasing it as 'user', then access the data in any test via the alias.
Change the default fixtures folder by creating a data folder, moving files there, and updating the fixturesFolder path in the configuration; re-run tests to verify and revert.
Update fixtures before use by editing them inside a then block, removing the alias, and reassigning fields such as email in the json file to a new value.
Explore how read file and write file commands in Cypress access any project file, compare their encoding behavior, and update files from the root path.
Clone our first React app and learn to use Cypress to perform api requests with get, post, put, delete, and patch to manage todos on a local json-server.
Explore the app's default view, filters, and the way API responses drive the UI. Learn to perform get, post, put, and delete requests with Cypress to manage tattoos and to-dos.
Learn how to add Cypress to a React project by installing Cypress, opening the Cypress project, cleaning sample files, and creating a first integration test with describe and it.
Explore how to use cy.request to perform a get request, validate the response status code, headers, duration, and body with assertions in Cypress.
Make a get request with Cypress, assert status code 200, ensure duration under 20 seconds, and verify the first response body item has complete false.
Learn to add parameters to Cypress get requests using URL query strings or the request options 'params' to filter responses, such as fetching a single todo by id.
Send a new to-do to the server with a post request, including the item data in the body, using Postman and Cypress. Confirm the response status 201 and the item.
Demonstrates issuing a put request to update a to-do's status from not completed to complete, sending id, name, and completed in the body, and verifies with page refresh.
Create and execute a delete request test case to remove a todo using the delete method and the todo URL, with no data sent, then verify deletion in the database.
Learn to perform secured api requests by obtaining a token through sign up and using it to authorize requests with a bearer token in Cypress and Postman.
A full Cypress io course from scratch where I start from the basics and go with you step by step to build a complete CI/CD pipeline for two react Applications.
We will start by learning Cypress commands and best practices, and then we will start with our first React application. We will see how to add cypress to the project, build our test cases, learn how to test the APIs, and use cypress commands and fixtures.
We will then connect our project to the cypress dashboard, enable Github integration, and connect the Cypress dashboard to slack.
After that, we will see how to build the CI/CD pipeline for our project, how we will make the app on the cloud, and then run the tests and see how to run the test cases in parallel. We will use the top 3 famous CI/CD tools: Jenkins, Gitlab, and CircleCI.
And after that, we will start with our second React application and build everything from scratch up to the pipeline; this section will practice everything we have learned in this course.
And Finally, we will see how to use Cypress to build React Unit test cases and the visual regression Test.
The videos were built short and up to a point; I will not waste your valuable time with long talks, and we will also learn by Example every single command or line of code. we will write, we will see an example for it and see it in action
I am excited to start this course with you guys and see you in the videos.