我有一個包含元素串列的 UI，2 列。第一列顯示專案的名稱，例如經理、操作員，串列將增長。第二列是顏色選擇器元素。您可以選擇一種顏色我正在嘗試為某個名稱查找顏色選取器元素，例如對于 Operator 我想遍歷元素并找到 Operator 的顏色選擇器元素從下面的 HTML 代碼片段我想找到以下行
<span tabindex="0" class="colour-select" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"></span>
我可以使用以下 css 獲取名稱元素串列
li[class='cdk-drag item container-fluid'] span[class='form-control']
我不知道如何更深入地進入顏色選擇課程
<span tabindex="0" class="colour-select" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"></span>
我有以下 HTML 代碼片段
<li _ngcontent-ppo-c336="" cdkdrag="" class="cdk-drag item container-fluid" ng-reflect-ng-class="[object Object]" ng-reflect-data="[object Object]" ng-reflect-disabled="false" rowid="370" orderid="0">
<div _ngcontent-ppo-c336="" class="row">
<div _ngcontent-ppo-c336="" class="col-sm-1 form-check">..</div>
<div _ngcontent-ppo-c336="" class="col-sm-5">
<span _ngcontent-ppo-c336="" class="form-control" title="" data-disabled="false">Operator</span>
<!--bindings={
"ng-reflect-ng-if": "true"
}--><!--bindings={}--><!--ng-container--><!--bindings={
"ng-reflect-ng-switch-case": "Description"
}--><!--bindings={
"ng-reflect-ng-switch-case": "Colour"
}--><!--bindings={
"ng-reflect-ng-switch-case": "Boolean"
}--><!--ng-container-->
</div>
<div _ngcontent-ppo-c336="" class="col-sm-3">
<!--bindings={
"ng-reflect-ng-switch-case": "Description"
}-->
<arm-colour-picker _ngcontent-ppo-c336="" name="colourPicker" ng-reflect-input-id="colourPicker_2" ng-reflect-colour-id="-2">
<div class="arm-colour-picker" title="1">
<span tabindex="0" class="colour-select" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"></span>
<input type="hidden" id="colourPicker_2" ng-reflect-name="colourPicker_2_dropdown" ng-reflect-is-disabled="false" class="ng-untouched ng-pristine ng-valid" value="[object Object]" ng-reflect-model="[object Object]">
<!--bindings={}-->
</div>
</arm-colour-picker>
<!--ng-container-->
<!--bindings={
"ng-reflect-ng-switch-case": "Colour"
}-->
<!--bindings={
"ng-reflect-ng-switch-case": "Boolean"
}-->
<!--ng-container-->
</div>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<div _ngcontent-ppo-c336="" class="col-sm-1 float-right">..</div>
<div _ngcontent-ppo-c336="" class="col-sm-1 float-right">..</div>
</div>
</div>
</li>
<li _ngcontent-ppo-c336="" cdkdrag="" class="cdk-drag item container-fluid" ng-reflect-ng-class="[object Object]" ng-reflect-data="[object Object]" ng-reflect-disabled="false" rowid="371" orderid="0">
<div _ngcontent-ppo-c336="" class="row">
<div _ngcontent-ppo-c336="" class="col-sm-1 form-check"><input _ngcontent-ppo-c336="" type="checkbox" title="" ng-reflect-name="checked-371" ng-reflect-is-disabled="false" class="ng-untouched ng-pristine ng-valid"></div>
<div _ngcontent-ppo-c336="" class="col-sm-5">
<span _ngcontent-ppo-c336="" class="form-control" title="" data-disabled="false">Minor</span><!--bindings={
"ng-reflect-ng-if": "true"
}--><!--bindings={}--><!--ng-container--><!--bindings={
"ng-reflect-ng-switch-case": "Description"
}--><!--bindings={
"ng-reflect-ng-switch-case": "Colour"
}--><!--bindings={
"ng-reflect-ng-switch-case": "Boolean"
}--><!--ng-container-->
</div>
<div _ngcontent-ppo-c336="" class="col-sm-3">
<!--bindings={
"ng-reflect-ng-switch-case": "Description"
}-->
<arm-colour-picker _ngcontent-ppo-c336="" name="colourPicker" ng-reflect-input-id="colourPicker_3" ng-reflect-colour-id="-2">
<div class="arm-colour-picker" title="1">
<span tabindex="0" class="colour-select" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"></span><input type="hidden" id="colourPicker_3" ng-reflect-name="colourPicker_3_dropdown" ng-reflect-is-disabled="false" class="ng-untouched ng-pristine ng-valid" value="[object Object]" ng-reflect-model="[object Object]"><!--bindings={}-->
</div>
</arm-colour-picker>
<!--ng-container--><!--bindings={
"ng-reflect-ng-switch-case": "Colour"
}--><!--bindings={
"ng-reflect-ng-switch-case": "Boolean"
}--><!--ng-container-->
</div>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<div _ngcontent-ppo-c336="" class="col-sm-1 float-right"><span _ngcontent-ppo-c336="" cdkdraghandle="" class="cdk-drag-handle fa fa-bars order-button" style="touch-action: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; user-select: none;"></span></div>
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<div _ngcontent-ppo-c336="" class="col-sm-1 float-right">
<button _ngcontent-ppo-c336="" type="button" class="delete far fa-times"></button><!--bindings={
"ng-reflect-ng-if": "true"
}--><!--bindings={}-->
</div>
</div>
</li>
我可以使用什么 css 定位器來訪問顏色選擇類。謝謝你的幫助
例如代碼片段這讓我得到了名字的所有元素
static get AudienceColour(): Cypress.Chainable<JQuery<HTMLElement>> {
const AudienceResourceText = [
"Undefined",
"Manager",
"Operator",
"Minor"
];
return cy.get("li[class='cdk-drag item container-fluid'] span[class='form-control']").each((item, index, list) => {
cy.wrap(item).should("contain.text", AudienceResourceText[index]);
});
}
里亞茲
uj5u.com熱心網友回復：
問題是.get()選擇器太具體了。
你有這個（簡化的）html
<li>
<div class="row">
<div class="col...">
<span>TEXT-TO-FIND</span>
</div>
<div class="col...">
<arm-colour-picker...
</div>
</div>
</li>
如果你把它剪下來，li[class='cdk-drag item container-fluid'] .row你會得到包含文本和顏色選擇器的行。
.should("contain.text", ...) 搜索指定元素的所有子元素，因此它仍然可以按預期作業。
cy.get("li[class='cdk-drag item container-fluid'] .row")
.each((item, index) => {
cy.wrap(item)
.should("contain.text", AudienceResourceText[index])
.find('span.colour-select')
})
}
這回答了您關于如何選擇顏色選擇器的問題，但還有更多與從方法回傳它相關的問題。
也許你想這樣做：
static get AudienceColour(): Cypress.Chainable<JQuery<HTMLElement>> {
const colors = []
return cy.get("li[class='cdk-drag item container-fluid'] .row")
.each((item, index) => {
cy.wrap(item)
.should("contain.text", AudienceResourceText[index])
.find('span.colour-select')
.invoke('attr', 'style') // grab the style attributes
.then(styles => colors.push(styles)
})
.then(() => return colors)
}
uj5u.com熱心網友回復：
要使用，.within()您需要使用parents命令向上導航
const AudienceResourceText = ["Undefined", "Manager", "Operator", "Minor"];
cy.get("li[class='cdk-drag item container-fluid'] span[class='form-control']")
.each((item, index, list) => {
cy.wrap(item)
.should("contain.text", AudienceResourceText[index]) // subject is span
.parents('.row') // subject is div.row
.within(() => {
cy.get('span.colour-select') // gets the color-picker
.should('have.css', 'color', 'rgb(0, 0, 0)') // check the color
})
})
uj5u.com熱心網友回復：
您可以使用以下within()命令執行此操作
cy.get(
"li[class='cdk-drag item container-fluid'] span[class='form-control']"
).each((item, index, list) => {
cy.wrap(item).within(() => {
expect(item).to.have.text(AudienceResourceText[index])
cy.get('.colour-select') //gets the color-select class
})
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/311604.html
標籤：javascript css 硒网络驱动程序 柏
上一篇：執行緒“main”org.openqa.selenium.WebDriverException中的例外：驅動程式服務器行程過早死亡