Friday, 5 November 2021

Cypress testing a Material-UI datepicker is not working on Github actions

We have a strange behavior when running our cypress tests in a github action. MUI datepicker the datepicker is in readonly mode and we can't enter any date (it's fine in other environments).

  1. Error in Cypress

    CypressError: Timed out retrying after 4000ms: cy.clear() failed because this element is readonly: <input aria-invalid="false" readonly="" type="text" aria-readonly="true" aria-label="Choose date" class="MuiOutlinedInput-input MuiInputBase-input css-1x5jdmq" value="">

  2. Visually looks the date picker does not have any button (something is going on) :

enter image description here

  1. The console logs show no error or warning

On other environments, windows/linux, the tests work fine, even though we launch the test in headless mode (all desktops with a UI). The MUI datepicker looks as nice as in MUI documentation (link).

Github action looks like :

on:
  workflow_dispatch:

defaults:
  run:
    working-directory: ic3-test
jobs:
  build:
    runs-on: ubuntu-latest
    container: cypress/included:8.6.0

    steps:    
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v2
      with:
         node-version: '16'
    
    - name: Install dependencies
      run: npm install
      working-directory: ic3-test
                
    - name: Cypress run with env
      uses: cypress-io/github-action@v2
      with:
          # headless: true
          browser: chrome
          record: true
          working-directory: ic3-test

Some hints are welcomed



from Cypress testing a Material-UI datepicker is not working on Github actions

No comments:

Post a Comment