Cypress 测试 Material-UI 日期选择器不适用于 Github 操作

Question

在 github 操作中运行 cypress 测试时，我们有一个奇怪的行为。MUI datepicker 日期选择器处于只读模式，我们无法输入任何日期（在其他环境中没问题）。

1. 赛普拉斯的错误

   CypressError：4000 毫秒后超时重试：cy.clear()失败，因为该元素是只读的： <input aria-invalid="false" readonly="" type="text" aria-readonly="true" aria-label="Choose date" class="MuiOutlinedInput-input MuiInputBase-input css-1x5jdmq" value="">

2. 从视觉上看，日期选择器没有任何按钮（正在发生某些事情）：

3. 控制台日志没有显示错误或警告

在其他环境（Windows/Linux）上，即使我们以无头模式（所有带有 UI 的桌面）启动测试，测试也能正常工作。MUI 日期选择器看起来与 MUI 文档（链接）中的一样好。

Github 操作如下所示：

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

生成错误的 Cypress 线路：

 cy.getWidget(widgetId).  // this is getting a div with wid = widgetId , works fine
        .find("input.MuiInputBase-input")
        .clear()
        .type(date). // date is a string

欢迎一些提示

Answer 1

在 azure devops 管道中运行 cypress 测试时，我们遇到了同样的错误。我认为这是同样的原因，看看你的日期选择器的屏幕截图，没有任何按钮。

给我们带来错误的输入是@mui/lab/DatePicker.

我们发现该组件正在渲染，就像@mui/lab/MobileDatePicker我们在 azure devops 管道中运行 cypress 测试一样。这里有解释：文档。该版本不接受直接文本输入，而是打开一个对话框来选择/输入日期，因此当尝试输入输入时，赛普拉斯测试失败。

我们的解决方案是直接使用@mui/lab/DesktopDatePicker。

Answer 2

这背后的原因是 Material UI 渲染MobileDatePicker组件，因为查询@media (pointer: fine)与我们的 Github Actions 工作流程使用的无头 Chrome 不匹配。移动组件仅具有只读输入，因此无法使用 和 对其进行清除或键入.type()（与具有可键入和可清除输入的组件.clear()相反）。DesktopDatePicker

由于我们不想删除该MobileDatePicker组件，因此我们创建了一个自定义命令，以便它检查当前是否正在呈现移动日期选择器。如果在移动设备上，测试将打开日期选择器，单击编辑按钮，从而打开移动输入视图。

在该输入视图中，输入字段不再存在readonly。使用该命令，无论是桌面还是移动设备，都可以清除输入字段并输入内容。

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);

Answer 3

由于我还没有看到所有代码，我将尝试尽可能具体地进行评论，我希望您回顾一些主题。

1- 检查转换后的代码中的属性。确保不应设置诸如 helperText={null} 之类的属性。

2-您可能需要安装polyfills。例如 popper.js （传递依赖）。尽管MUI声称它是（polly）不需要的。技术每天都在进步，可能会有他们无法捕捉到的变化。

3- 确保工作模式正确。甚至用 Jest 来测试它。比如window.matchMedia。