0
249
VisualizaçõesCypress prueba un selector de fecha Material-UI que no funciona en las acciones de Github
Tenemos un comportamiento extraño cuando ejecutamos nuestras pruebas de ciprés en una acción de github. MUI datepicker el selector de fechas está en modo de solo lectura y no podemos ingresar ninguna fecha (está bien en otros entornos).
error en ciprés
CypressError: se agotó el tiempo de reintento después de 4000 ms:
cy.clear()falló porque este elemento es de solo lectura:<input aria-invalid="false" readonly="" type="text" aria-readonly="true" aria-label="Choose date" class="MuiOutlinedInput-input MuiInputBase-input css-1x5jdmq" value="">Visualmente parece que el selector de fecha no tiene ningún botón (algo está pasando):
- Los registros de la consola no muestran ningún error ni advertencia.
En otros entornos, Windows/Linux, las pruebas funcionan bien, aunque iniciamos la prueba en modo autónomo (todos los escritorios con interfaz de usuario). El selector de fechas de MUI se ve tan bien como en la documentación de MUI ( enlace ).
La acción de Github se ve así:
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-testLa línea Cypress que genera el error:
cy.getWidget(widgetId). // this is getting a div with wid = widgetId , works fine .find("input.MuiInputBase-input") .clear() .type(date). // date is a stringAlgunas sugerencias son bienvenidas
3 Respostas
Responde à pergunta0
Como no he visto todo el código, intentaré comentar lo más específico que pueda, me gustaría que revisaran algunos temas.
1- Examinar las propiedades en el código transformado. Asegúrese de que no se establezca una propiedad como helperText={null}.
2- Es posible que deba instalar polyfills. Por ejemplo, para popper.js (dependencia transitiva) . Aunque MUI afirma que (polly) no es necesario. La tecnología avanza cada día y puede haber cambios que no pueden captar.
3- Asegúrese de trabajar en el modo correcto. Incluso pruébalo con Jest. Tales window.matchMedia.
0
Tuvimos el mismo error al ejecutar la prueba de ciprés en las canalizaciones de Azure DevOps. Y creo que es la misma razón, mirando tu captura de pantalla del selector de fechas sin ningún botón.
La entrada que nos estaba dando el error era @mui/lab/DatePicker .
Descubrimos que este componente se muestra como @mui/lab/MobileDatePicker cuando ejecutamos las pruebas de cypress en las canalizaciones de desarrollo de Azure. Se explica aquí: docs . Esa versión no acepta la entrada directa de texto, pero abre un cuadro de diálogo para seleccionar/ingresar la fecha, por lo tanto, la prueba de ciprés falla al intentar escribir en la entrada.
Nuestra solución fue usar @mui/lab/DesktopDatePicker directamente.
0
La razón detrás de esto es que Material UI representa el componente MobileDatePicker , ya que la consulta @media (pointer: fine) no coincide en el Chrome sin interfaz utilizado por nuestro flujo de trabajo de acciones de Github. El componente móvil solo tiene entradas de solo lectura, por lo que no se puede borrar ni escribir con .type() y .clear() (a diferencia del componente DesktopDatePicker , que tiene entradas que se pueden escribir y borrar).
Dado que no queremos eliminar el componente MobileDatePicker , hemos creado un comando personalizado para que verifique si el selector de fecha móvil se está procesando actualmente. Si está en un dispositivo móvil, la prueba abre el selector de fechas, hace clic en el botón de edición, por lo que se abre la vista de entrada móvil.
Y en esa vista de entrada, el campo de entrada ya no es de readonly . Con ese comando, sin importar si es de escritorio o móvil, el campo de entrada se puede borrar y escribir.
Cypress.Commands.add( 'chooseDatePicker', (selector: string, value: string) => { cy.get('body') .then(($body) => { const mobilePickerSelector = `${selector} input[readonly]`; const isMobile = $body.find(mobilePickerSelector).length > 0; if (isMobile) { // The MobileDatePicker component has readonly inputs and needs to // be opened and clicked on edit so its inputs can be edited cy.get(mobilePickerSelector) .click(); cy.get('[role="dialog"] [aria-label="calendar view is open, go to text input view"]') .click(); cy.get(`[role="dialog"] ${selector}`) .find('input') .clear() .type(value); cy.contains('[role="dialog"] button', 'OK') .click(); } else { cy.get(selector) .find('input') .clear() .type(value); } }); }, ); // Usage: const datePickerValue = '2021-01-03'; cy.chooseDatePicker('[data-testid="my-datepicker"]', datePickerValue);