https://github.com/wlsf82/react-date-pickers-mui

Sample project to demonstrate how to interact with Material UI date fields using Cypress.
https://github.com/wlsf82/react-date-pickers-mui

cypress cypress-io cypress-testing date-picker date-testing datepicker datepicker-mui material-ui materialui mui mui-datepicker testing web-testing

Last synced: 5 months ago
JSON representation

Sample project to demonstrate how to interact with Material UI date fields using Cypress.

• Host: GitHub
• URL: https://github.com/wlsf82/react-date-pickers-mui
• Owner: wlsf82
• License: mit
• Created: 2023-05-11T19:01:53.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-11-25T21:51:46.000Z (10 months ago)
• Last Synced: 2025-04-23T08:13:00.755Z (5 months ago)
• Topics: cypress, cypress-io, cypress-testing, date-picker, date-testing, datepicker, datepicker-mui, material-ui, materialui, mui, mui-datepicker, testing, web-testing
• Language: JavaScript
• Homepage: https://youtube.com/playlist?list=PL-eblSNRj0QEn1PDDztBjFpLsMFIW4T46
• Size: 1.88 MB
• Stars: 19
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-date-pickers-mui

[![main](https://github.com/wlsf82/react-date-pickers-mui/actions/workflows/ci.yml/badge.svg)](https://github.com/wlsf82/react-date-pickers-mui/actions)

[![react-date-pickers-mui](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/2obqu6&style=flat&logo=cypress)](https://cloud.cypress.io/projects/2obqu6/runs)

Sample project to demonstrate how to interact with [Material UI](https://mui.com) date fields using [Cypress](https://cypress.io).

## Pre-requirements

It is required to have git, Node.js and npm installed to clone and run this project.

> I used versions `2.34.1`, `v18.15.0`, and `9.5.0` of git, Node.js and npm, respectively. I suggest you use the same or later LTS versions.

## Installation

Run `npm install` (or `npm i` for the short version) to install the app and dev dependencies.

## Starting the app

Run`npm start` to initialize the app in development mode locally.

> If everything goes well, you should see the app running on `http://localhost:3000`.

## Tests

Run `npm test` (or `npm t` for the short version) to run the test in headless mode.

Or, run `npm run cy:open` to open the Cypress App and run the tests in interactive mode.

> It's also possible to run the tests via Node.js with the command `npm run test:and:gen:report`, which runs the tests in headless mode and generates a JSON-file-format test report inside the (not versioned) `test-report/` directory.

### Tests sample

Below is an example of the running tests.

https://github.com/wlsf82/react-date-pickers-mui/assets/2768415/c40c505c-4550-4aa7-96dc-8a8c774c527c

## Support this project

If you want to support this project, leave a ⭐.

___

This project was created with 💚 by [Walmyr](https://walmyr.dev).