如何使用json文件与testcafe中的多个webelments交互

问题描述

我想与多个元素交互，例如多个复选框，单选按钮，按钮等。我想将元素的标签/名称存储到json文件中。如何使用testcafe中Json文件中的名称与多个元素进行交互

解决方法

看一下数据驱动的测试示例。它显示了如何从JSON文件加载数据。您可以在Selector('button').withText(data.buttons[0])之类的Selector表达式中使用加载的数据来引用元素。

,

我不知道您的特定用例，但纯粹从技术上讲，您可以轻松地完成您要问的事情：

资源/名称.json ：

{
    "buttons": [
        "First Click","Second Click"
    ],"checkboxes": [
        "Choice1","Choice2"
    ]
}

然后我可以将该文件放在测试文件中并使用以下值：

import { getBaseUrl } from '../Helpers/baseUrl';
import { getEnv } from '../Helpers/env';
import Webelements from '../Objects/webelements'

const baseUrl = getBaseUrl();
const env = getEnv();

const webelements = require('../Resources/names.json');

fixture `Webelements`    
    .page(baseUrl);   

test              
    ('Access Webelements From Json',async t => {
        
        webelements.buttons.forEach((button) => {
            console.log(button);
        });

        webelements.checkboxes.forEach((checkbox) => {
            console.log(checkbox)
        });
});

这会将以下内容打印到控制台中：

First Click
Second Click
Choice1
Choice2

另一个解决方案可能是使用类：

Objects / webelements.js ：

class Checkboxes {
    constructor () {
        this.choices = {
            1: "Choice1",2: "Choice2"
        }
    }
}

class Buttons {
    constructor () {
        this.names = ["First Click","Second Click"]
    }
}


class Webelements {
    constructor () {        
        this.checkboxes = new Checkboxes();
        this.buttons = new Buttons();
    }      
}

export default new Webelements();

并像这样使用它：

test             
    ('Access Webelements From Classes',async t => {
        
        Object.entries(Webelements.checkboxes.choices).forEach(([key,val]) => {
            console.log(key + " - " + val);
        })

        Webelements.buttons.names.forEach((name) => {
            console.log(name)
        });
});

这将输出：

1 - Choice1
2 - Choice2
First Click
Second Click

因此，有很多选择，但是重点是，某些解决方案在某些情况下会更好。我对您的处境几乎一无所知，所以您必须自己做这个决定。