英文:
Separating the contents of .then to a new function in Cypress
问题
如果可能的话，我想要为最后两行创建一个新的**自定义命令**：
```ts
animal.animalObj.name = 'Rex';
animal.animalObj.randomInfo = ["喜欢叫！"];
该命令将需要一个字符串和一个字符串数组，并同时将这两个值分配给name和randomInfo。这样，我只需调用该自定义命令并提供两个动态值即可。
<details>
<summary>英文:</summary>
I have a function:
```ts
let animal: {
animalObj: {
name: string;
randomInfo: string[]
}
} = {
animalObj: {
name: '',
randomInfo: ['']
}
}
cy.request({
method: 'POST',
url: '/api/animal',
body: animal
}).then($el => {
animal.animalObj = $el.body.Order
animal.animalObj.name = 'Rex'
animal.animalObj.randomInfo = ["Likes to bark!"]
})
If it's possible, I would like to create a new custom command for the last two lines:
animal.animalObj.name = 'Rex'
animal.animalObj.randomInfo = ["Likes to bark!"]
Where it will require a string and string[] and at the same time, assigns those two values to name and randomInfo. That way, I will only need to call that custom command and supply 2 dynamic values.
答案1
得分: 5
// 自定义命令紧随`cy.request()`之后，是一个“子”命令。
// 它有一个特殊的参数`{prevSubject:true}`，用于传递请求响应。
Cypress.Commands.add('setAnimal', {prevSubject:true}, ($response, name, randomInfo) => {
const animal = {}
animal.animalObj = $response.body.Order || {}
animal.animalObj['name'] = name
animal.animalObj['randomInfo'] = randomInfo
return cy.wrap(animal)
})
cy.request({
method: 'POST',
url: '/api/animal',
body: animal
})
.setAnimal('Rex', ["Likes to bark!"]) // 响应会自动传递
.as('animal')
// 稍后
cy.get('@animal')
.then(animal => {
expect(animal.animalObj.name).to.eq('Rex')
})
})
英文:
A custom command that follows cy.request() is a "child" command.
It has a special parameter {prevSubject:true} to pass in the request response.
Cypress.Commands.add('setAnimal', {prevSubject:true}, ($response, name, randomInfo) => {
const animal = {}
animal.animalObj = $response.body.Order || {}
animal.animalObj['name'] = name
animal.animalObj['randomInfo'] = randomInfo
return cy.wrap(animal)
})
cy.request({
method: 'POST',
url: '/api/animal',
body: animal
})
.setAnimal('Rex', ["Likes to bark!"]) // response is passed automatically
.as('animal')
// later
cy.get('@animal')
.then(animal => {
expect(animal.animalObj.name).to.eq('Rex')
})
})
答案2
得分: 0
相比于创建一个自定义函数，你可以简单地创建一个`Animal`类，并在该类上有一个函数同时更新这两个值。
class Animal {
data = { animalObj: { name: '', randomInfo: [''] } };
constructor(name: string = '', randomInfo: string[] = ['']) {
this.data.animalObj.name = name;
this.data.animalObj.randomInfo = randomInfo;
}
update(name: string, randomInfo: string[]) {
this.data.animalObj.name = name;
this.data.animalObj.randomInfo = randomInfo;
}
}
...
let animal = new Animal();
cy.request({
method: 'POST',
url: '/api/animal',
body: animal.data // 假设请求体必须为 `{ animalObj: {} }`
}).then($el => {
animal.update('Rex', ['Likes to Bark!']);
// 如果你只需要更新一个值
animal.data.animalObj.name = $el.body.name
})
英文:
Instead of creating a custom function, you could simply make an Animal class, and have a function on the class that updates those two values at once.
class Animal {
data = { animalObj: { name: '', randomInfo: [''] } };
constructor(name: string = '', randomInfo: string[] = ['']) {
this.data.animalObj.name = name;
this.data.animalObj.randomInfo = randomInfo;
}
update(name: string, randomInfo: string[]) {
this.data.animalObj.name = name;
this.data.animalObj.randomInfo = randomInfo;
}
}
...
let animal = new Animal();
cy.request({
method: 'POST',
url: '/api/animal',
body: animal.data // assumes body has to have `{ animalObj: {} }`
}).then($el => {
animal.update('Rex', ['Likes to Bark!']);
// if you need to only update one value
animal.data.animalObj.name = $el.body.name
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论