cy.type() 只能接受字符串或数字。你传入：undefined

Question

我正在尝试使用 CSV 文件填写 HTML 表单。对于他们，我首先将 CSV 文件转换为 JSON，然后尝试使用 JSON 文件填写表格。但是，我唯一得到的是错误：cy.type() can only accept a string or number。您传入：undefined

我已经检查了针对同一问题给出的答案，但找不到对我有帮助的答案。我做错了什么？

这里我留下了我首先将文件从 CSV 传递到 JSON 的代码，然后它被记录在控制台中，最后我通过表单传递它：

<!-- language: js -->
import {parse} from "papaparse"
    describe('Convert CSV file in JSON file', function(){
        let allData        
        before(()=>{
            cy.readFile('C:/data/cypress/downloads/generatedBy_react-csv.csv')
                .then(str =>{
                    cy.writeFile('C:/data/cypress/fixtures/testDataFromCSV.json', parse(str, {header:true}))
                })
            cy.fixture('testDataFromCSV.json')
                .as('dataJson')
                .then(dataJson => {
                    allData = dataJson
                })
        })
it('Log the data from the CSV to the JSON file', function(){       
    allData.data.forEach(data =>{
        cy.log(data.firstName)
        cy.log(data.lastName)
        cy.log(data.email)
        cy.log(data.age)
        cy.log(data.address)
        cy.log(data.vehicle)
        cy.log(data.phoneNo)
    })
})

it('Use JSON Data in hte HTML form', function(){       
    allData.data.forEach(data =>{
        cy.visit('http://localhost/2iTesting/form.html')
        cy.fixture("testDataFromCSV.json")
            .then((dataJson)=>{
                allData = JSON.stringify(dataJson)
                cy.get('[cy-data="firstname"]')
                    .type(data.firstName)
                cy.get('[cy-data="lastname"]')
                    .type(data.lastName)
                cy.get('[cy-data="email"]')
                    .type(data.email);
                cy.get('[cy-data="address"]')
                    .type(data.address);
                cy.get('[cy-data="vehicle"]')
                    .type(data.vehicle);
                cy.get('[cy-data="submit"]')
                    .click()
                cy.wait(1500)
            })
    })
})

})

Answer 1

问题在于您的 then 块的范围。在这个夹具的 then 块内。 cy.fixture('testDataFromCSV.json').as('dataJson').then(dataJson => { allData = dataJson})

allData = dataJson

但在 then 块之外 alldata = let alldata 或者只是未定义。要访问分配的变量，您需要使用 cy.wrap().

cy.fixture('testDataFromCSV.json').as('dataJson')
.then( (dataJson) => {
  cy.wrap(dataJson).as(allData)
 }

然后要访问您包装的对象，您只需执行以下操作。

it('Log the data from the CSV to the JSON file', () =>{
cy.get('@allData')
.then( (allData) => {
  Object.Values(allData.data).forEach( (value) =>{ //this might be wrong as I'm unsure the data structure of your object
    cy.log(value)
  }
}
it('Use JSON Data in the HTML form', () =>{
cy.get('@allData')
  .then( (dataJson) =>{
    allData = JSON.stringify(dataJson)
    cy.get('[cy-data="firstname"]')
    .type(allData.data.firstName) //and so on from here
  }

最后一件事要注意，您在第二个 it 块的末尾有一个 cy.wait(1500)。我建议查看 cy.intercept().as('api') 以捕获您通过单击提交获得的任何 API 响应。那么它只是一个 cy.wait('api') 的问题，这是一个最佳实践。

Answer 2

只需删除 stringify 步骤。

我认为您打算 parse，但没有必要，因为 Cypress 已经为您完成了。任何具有 .json 扩展名的文件都作为对象传递到测试中。

cy.fixture("testDataFromCSV.json")
  .then((dataJson) => {

    // allData = JSON.stringify(dataJson)  // no need to do this, just use dataJson

    cy.get('[cy-data="firstname"]')
      .type(dataJson.firstName)    // NOTE you have data.firstName
    ...                            // which looks like a cut-and-paste error
                                   // from the test above

写入解析结果的数据部分

papaparse 库为您提供了一个包含数据、错误数组和元数据的包装器对象。

理想情况下，您希望在写入 JSON 之前检查错误，但至少您需要写入解析结果的 .data 属性。

cy.readFile('./cypress/downloads/generatedBy_react-csv.csv').then(str =>{
  const result = parse(str, {header:true})
  if (result.errors.length) {
    // handle errors
  }
  cy.writeFile('./cypress/fixtures/testDataFromCSV.json', result.data)
})

cy.type() 只能接受字符串或数字。你传入：undefined

cy.type() can only accept a string or number. You passed in: undefined

html

forms

csv

json

cypress