Testcafe 如何读取 json 响应并选择第一项并将其传递给选择器答案

【问题标题】：Testcafe how to read json response and pick first item and pass it to selectorTestcafe 如何读取 json 响应并选择第一项并将其传递给选择器
【发布时间】：2019-06-12 07:09:27
【问题描述】：

读取 JSON 响应

1) 当我访问这个 URL 'http:example.com/fruits' 时，它会到达一个端点 'http:example.com/v1/collections/fruits' 并且我在浏览器网络响应中看到 JSON：

{
   "total":3,
   "page":1,
   "pageSize":24,
   "rows":[
      {
         "id":19,
         "title":"Apple"

      },
      {
         "id":21,
         "title":"Grape",

      },
      {
         "id":6,
         "title":"Orange",

      },

   ]
}

2) 我想拿起第一个标题 - Apple 并将其传递给选择器并单击它

【问题讨论】：

“将其传递给选择器并单击它”到底是什么意思？
@Brainfeeder 用标题识别正确的选择器，然后指示 testcafe 点击该选择器
嗯，是的，testcafe 文档中的答案和示例应该为 OP 做......？

标签： javascript json automated-tests e2e-testing testcafe

【解决方案1】：

在您的应用中，您可以创建“GET”方法，例如：

fetch('http:example.com/v1/collections/fruits', {
  method: 'GET'
})
.then(response => response.json())
.then(data => {
  console.log(data.rows[0]['title']) // should return 'Apple'
})
.catch(error => console.error(error))

然后，您可以将其传递给您的选择器。

【讨论】：

【解决方案2】：

您也可以使用RequestHook 获取此信息。

这可能存在于帮助文件中

import { RequestHook } from 'testcafe';

export default class MyRequestHook extends RequestHook {
    constructor (requestFilterRules, responseEventConfigureOpts,ObjToReturn) {
        super(requestFilterRules, responseEventConfigureOpts);
        this.ObjToReturn = ObjToReturn;
    }
    onRequest (event) {
        if(event.isAjax) {
            console.log(event.requestOptions.url);
        }
    }
    onResponse (event) {
        this.ObjToReturn = JSON.parse(event.body.toString());
    }
}

然后，这将在您的主测试文件中：

import { Selector } from 'testcafe';
import MyRquestHook from './MyHTTPRequestFile';

let getReponse = {};
const hookConfigOptions = {
    logResponseBody: true,
    stringifyResponseBody: true,
    includeHeaders: true,
    includeBody: true
}

let getFruits = new MyRequestHook({url:'http://example.com/fruits', method: 'get'},hookConfigOptions,getResponse);

fixture `Name Of test`
    .requestHooks(getFruits)

test('Do something with response', async t => {
    //do something with the response object
    console.log("Response Data: " + getFruits.rows[0]['title']
}

【讨论】：