過去3日間、特定のセレクターに適合する要素のリストのCSSセレクターパスを取得するために使用している関数を取得して、Nightwatch JSのカスタムコマンドとして機能させようとしましたが、成功しませんでした。
コマンドに与えるもの：
browser.getUniqueCssSelector('.note');
出力は次のようになります。
['HTML> BODY> SECTION.upper-container > DIV.notes:nth-child(1) > DIV.note:nth-child(1)',
'HTML> BODY> SECTION.upper-container > DIV.notes:nth-child(1) > DIV.note:nth-child(2)',
'HTML> BODY> SECTION.upper-container > DIV.notes:nth-child(2) > DIV.note:nth-child(1)',
'HTML> BODY> SECTION.bottom-container > DIV.inner > DIV.notes:nth-child(1) > DIV.note'
'HTML> BODY> SECTION.bottom-container > DIV.inner > DIV.notes:nth-child(2) > DIV.note']
などなど。
私はそれを実装するためにさまざまな方法を試しましたが、成功しませんでした。私は Async/Await にかなり慣れていないため、あまり運がなく、Nightwatch.js ガイドの例を関連付けることができませんでした ( https ://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-commands ) を私の問題に追加してください。
How to generate unique css selector for DOM element? にあるコード セグメントを使用して、次のように記述しました。 :
// getUniqueCssSelector.js file
exports.command = async function(selector) {
var browser = this;
let result = browser.execute(function (selector) {
const nodes = Array.from(document.querySelectorAll(selector))
var nodesSelectors = [];
nodes.forEach(node => {
nodesSelectors.push(getCssSelectorShort(node));
});
return nodesSelectors;
function getCssSelectorShort(el) {
let path = [], parent;
while (parent = el.parentNode) {
let tag = el.tagName, siblings;
path.unshift(
el.id ? `#${el.id}` : (
siblings = parent.children,
[].filter.call(siblings, sibling => sibling.tagName === tag).length === 1 ? tag :
`${tag}:nth-child(${1+[].indexOf.call(siblings, el)})`
)
);
el = parent;
};
return `${path.join(' > ')}`;
};
}, [selector], function(res) {
console.log('************INSIDE COMMAND RETURN CALLBACK ');
return res;
})
return result;
}
そこから、このカスタム コマンドを呼び出すテスト コードで実行できるようにしたいと考えてawaitいます。このコマンドは複数の要素で呼び出す必要があるため、コールバック関数にすることは機能しますが、私のコードを永遠のコールバック スタックに入れることになり、非常に見苦しく、非常に高速になります。
理想的には、コードを次のようにしたいと考えています。
// nwtest.js file
let nodeSelectorsList= await browser.getUniqueCssSelectors('.note');
console.log(nodeSelectorsList); // Would bring me back the entire set I posted above.
nodeSelectorsList.forEach(async (noteElement)=> {
let resultSingle = await browser.element('css selector', noteElement);
console.log(resultSingle); // Should print the elements returned individually
})
残念ながら、私は常にundefined努力の成果として得られます。:/
私はこれについて数日から1週間近く頭を悩ませていて、PromiseとEventの両方の実装を試しましたが、これは私を超えていたので、SOの助けを求めました. どんな助けでも大歓迎です!.