I am having hard time clicking on an individual icon within this table shown bellow.
I tried the code bellow , but did not work
cy.get('table >tbody >tr td:nth-child(1) fa-icon:nth-child(1)').click({multiple: true})
Visual:
Inspected DOM:
DOM text:
<div _ngcontent-ixx-c110 stickything class="d-block grid is-sticky" style="z-index: 1; top: 0px; width: auto; left: auto; position: sticky;">
<div _ngcontent-ixx-c110 class="d-flex ng-star-inserted">
<table _ngcontent-ixx-c110 class="table table-sm table-bordered">
<thead _ngcontent-ixx-c110 class="bg-color text-center text-black">...</thead>
<tbody _ngcontent-ixx-c110 class="text-center ng-star-inserted">
<tr _ngcontent-ixx-c110 class="bg-addition ng-star-inserted">
<td _ngcontent-ixx-c110 class="stickyContainertd ng-star-inserted" style="width: 20px; padding-top: 4px !important;">
<fa-icon _ngcontent-ixx-c110 size="sm" class="ng-fa-icon ng-star-inserted" css="6">...</fa-icon>
<!-- -->
<!-- -->
Performance insights
</td>
</tr>
...
</tbody>
</table>
</div>
</div>
You'll need to add an :nth-child() to the row (<tr>) as well as column (<td>), presuming the rows all have the same pattern of content.
For example:
cy.get('table >tbody >tr:nth-child(1) td:nth-child(1) fa-icon:nth-child(1)')
.should('have.length', 1)
.click()
or .eq() works
cy.get('table tbody')
.find('tr').eq(0)
.find('td').eq(0)
.find('fa-icon').eq(0)
.should('have.length', 1)
.click()
Related
I learn VUE.JS and I got this two errors while I tried to get data values and make Edit/Update functionality.
I managed to get all data but I got warning:
[Vue warn]: Extraneous non-emits event listeners (editedStation) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.
at <StationItem key=121 id=121 line="test" ... >
at <StationList onVnodeUnmounted=fn<onVnodeUnmounted>
[Vue warn]: Extraneous non-props attributes (id) were passed to component but could not be automatically inherited because component renders fragment
in console after sending the data from the row into form.
Child component:
<template>
<tr>
<td style="padding: 10px">{{ line }}</td>
<td style="padding: 10px">{{ physLine }}</td>
<td style="padding: 10px">{{ wsType }}</td>
<td style="padding: 10px">{{ ws }}</td>
<td style="padding: 10px">{{ name }}</td>
<td style="padding: 10px">{{ isValid }}</td>
<td style="padding: 10px">{{ stationGroupId }}</td>
<td style="padding: 10px">{{ order }}</td>
<td style="padding: 10px" class="actions">
<button #click="editStation($event)" v-bind:id="stationId">
{{ editIsClicked ? "Done" : "Edit" }}
</button>
</td>
</tr>
<tr v-if="editIsClicked" style="background-color: #ffda99">
<td colspan="3" style="padding: 30px 0px 30px 30px">
<div class="form-control" style="margin-bottom: 10px; width: 80%">
<label for="line" style="display: block; text-align: left; font-size: 14px"
>Line Number</label
>
<input
type="text"
:value="station.lineNum"
style="width: 90%; display: block; text-align: left"
/>
</div>
<div class="form-control" style="margin-bottom: 10px; width: 80%">
<label
for="physLine"
style="width: 90%; display: block; text-align: left; font-size: 14px"
>
Phys line
</label>
<input
type="text"
:value="station.physLine"
style="width: 90%; display: block; text-align: left"
/>
</div>
<div class="form-control" style="margin-bottom: 10px; width: 80%">
<label
for="wsType"
style="width: 90%; display: block; text-align: left; font-size: 14px"
>WS Type</label
>
<input
type="text"
:value="station.wsType"
style="width: 90%; display: block; text-align: left"
/>
</div>
<div
class="form-control"
style="width: 50%; margin-bottom: 10px; border: 1px solid #b5b5b5"
>
<label
for="isValid"
style="width: 40%; display: block; text-align: left; font-size: 14px"
>is Valid</label
>
<input type="checkbox" :value="station.isValid" style="margin-left: -350px" />
</div>
<p v-if="!isValid.isValid">{{ errorMessage }}</p>
<tr v-for="(btn, index) in filteredButtonList" v-bind:key="btn.id">
<td>{{ btn.buttonListName }}</td>
<td>{{ btn.buttonListDesc }}</td>
<td>
<select
#change="onQuidoIdChange($event)"
class="form-select form-control required"
v-bind:id="index + 1"
>
<option
class="quido-id"
v-for="entry in selectedQuidoId"
:value="entry.quidoId"
selected
:key="entry.quidoId"
disabled
hidden
>
{{ entry.quidoName }}
</option>
<option
v-for="quido in filteredQuidosList"
:value="quido.quidoId"
v-bind:key="quido.quidoId"
v-bind:id="quido.quidoId"
>
{{ quido.quidoName }}
</option>
</select>
</td>
<td>
<tr>
<td>
<input
#change="onInputChange($event)"
type="number"
class="input-custom"
:placeholder="`Input ${index + 1}`"
v-bind:id="index + 1"
:value="station.stationButtons[index].input"
/>
</td>
</tr>
</td>
</tr>
</td>
<td colspan="6" style="padding-bottom: 250px:">
<div class="form-control" style="margin-bottom: 10px">
<label style="display: block; text-align: left; font-size: 14px" for="wsName"
>WS Name</label
>
<input
type="text"
:value="station.wsName"
style="width: 80%; display: block; text-align: left"
/>
</div>
<div class="form-control" style="margin-bottom: 10px">
<label style="display: block; text-align: left; font-size: 14px" for="wsName"
>Position Name</label
>
<input
type="text"
:value="station.posName"
style="width: 80%; display: block; text-align: left"
/>
</div>
<div class="form-control" style="margin-bottom: 10px">
<label
style="width: 80%; display: block; text-align: left; font-size: 14px"
for="wsName"
>Order</label
>
<input
type="text"
:value="station.order"
style="width: 80%; display: block; text-align: left"
/>
</div>
<div class="form-control" style="width: 82%">
<label for="stationGroupId">Choose Station Group</label>
<select
#change="changeStationGroupId($event)"
style="width: 100%"
v-bind:id="index + 1"
class="required"
>
<option
class="stgr-id"
v-for="entry in selectedStationGroupId"
:value="entry.stationGroupId"
selected
:key="entry.stationGroupId"
disabled
hidden
>
{{ entry.stationGroupsName }}
</option>
<option
v-for="stGrId in filteredStationGroups"
:value="stGrId.stationGroupsId"
v-bind:key="stGrId.stationGroupsId"
>
{{ stGrId.stationGroupsName }}
</option>
</select>
</div>
</td>
</tr>
</template>
Parent component:
<template>
<div class="section-global">
<station-form #save-data="saveData"> </station-form>
</div>
<div class="section-global">
<table v-if="hasStations" class="render-list-table">
<thead>
<!-- <th>Line ID</th> -->
<th>Line num</th>
<th>Phys Line</th>
<th>WS Type</th>
<th>WS Name</th>
<th>Pos. name</th>
<th>isValid</th>
<th>Station Group ID</th>
<th>Order</th>
<th>Actions</th>
</thead>
<tbody>
<station-item
v-for="station in filteredStations"
:key="station.stationId"
:id="station.stationId"
:station-id="station.stationId"
:line="station.lineNum"
:phys-line="station.physLine"
:ws-type="station.wsType"
:ws="station.wsName"
:name="station.posName"
:order="station.order"
:is-valid="station.isValid"
:stationGroupId="station.stationGroupId"
#editedStation="editFormData($event)"
>
</station-item>
</tbody>
</table>
<h1 v-else>NO STATIONS FOUND</h1>
</div>
</template>
<script>
import StationItem from "#/components/stations/StationItem.vue";
import StationForm from "#/components/stations/StationForm.vue";
export default {
data() {
return {
editedDataToBeSendToFormInputs: [],
};
},
components: {
StationItem,
StationForm,
},
computed: {
filteredStations() {
return this.$store.getters["stations/stations"];
},
hasStations() {
return this.$store.getters["stations/hasStations"];
},
probaFiltered() {
return this.$store.getters["stations/probaGetter"];
},
},
created() {
this.loadStations();
this.loadProba();
},
methods: {
editFormData(event) {
const dataToBeEdited = event;
// this.editedDataToBeSendToFormInputs.push(dataToBeEdited);
const test = this.probaFiltered;
test.push(dataToBeEdited);
this.loadProba();
},
saveData(data) {
this.$store.dispatch("stations/addStation", data);
},
loadStations() {
this.$store.dispatch("stations/loadStationList");
}
},
};
</script>
Problem visualisation.
Can someone help me get rid of this browser warnings?
I tried a couple of solutions from StackOverflow but without success. I wrapped the t-row in div tag and I got another issue with the render, I cannot render div as t-row in the next component where I need that data.
Thanks in advance.
After failing to send data via EventBus into Create section (A1) i decided to make form inside the component that I render (B2) and emit the data into B1 component.
I try to send the data from Child to Parent (from B2 to B1) but I get the error above. App works but I hate errors.
Check this the first warning.
And declare your component editedStation event with the emits option inside the component.
It seems for me, that you are using Vue 3. If so, then please remove the Vue 2 tag.
Have the following DIV class, where you click on the bottom it will create a drop down menu. In browser, you can click it with mouse, however with IE automation with VBA. I tried the ".click" method and doesn't work.
I also tried the FireEvent with "onclick" "onchange" "onmouseover" and nothing works. Trying to see if there is any other solution
<div id="add12" style="width: 47px; height: 23px; white-space: nowrap;
position: static;"
controltype="DropDown" param="par">
<input name="ct10115" id="ddl" type="hidden" value="E">
<input class="ffb-input" id="input" style="width: 13px;" maxlength="1"
autocomplete="off">
<span class="ffb-arrow ui-button ui-widget ui-state-default ui-corner-Allui-button-text-icon-primary" id="teste2" role="button" ariadisabled="false" style="position:
static;">
<span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"
style="left: 0px; top: 0px; margin-top: 0px; position: static;"></span>
<span class="ui-button-text"></span>
</span>
<div class="ffb" id="example11" style="left: 0px; top: 29px; width: 450px; display: none; z- index: 21; opacity: 0.999;">
<div class="content" style="height: auto; max-height: 200px;" scrolltop="0">
<div class="row" id="A" val="A" std_phase_cd="A" std_nm="A_">
<table>
<tbody>
<tr>
<td style="width: 45px;">A </td>
<td>none A </td>
</tr>
</tbody>
</table>
</div>
<div class="row" id="B" val="B" std__cd="B" std_nm="1">
<table>
<tbody>
<tr>
<td style="width: 45px;">B </td>
<td>none1 </td>
</tr>
</tbody>
</table>
</div>
</div>
<div></div>
</div>
</div>
ok I got it figured out.
So I use the dev tool on browser, and found the event e.g. click, mousedown etc.
then I use IE.dipatchEvent to trigger the click event.
There is a drop down with an arrow on the side which opens up a sub menu. I am not able to click on the dropdown in chrome whereas its working in ie.
I tried hover and click and actions build too. But it's not working.
The code is as follows:
<div id="navigatortab" class=" x-plain undefined sd_nav_tabpanel x-border-panel" style="left: 0px; top: 0px; width: 1600px;">
<div id="ext-gen32" class="support-servicedesk-navigator">
<table id="ext-comp-1014" class="x-btn support-servicedesk-sb support-servicedesk-sbactive caseMru x-btn-noicon" cellspacing="0" style="width: 180px; height: 26px; background-image: none; background-color: transparent;">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<tr>
<td class="x-btn-ml">
<td class="x-btn-mc">
<em id="ext-gen41" class="x-btn-split" unselectable="on">
<button id="ext-gen33" class=" x-btn-text" type="button">
<div class="mruIcon"></div>
<span>Cases</span>
</button>
</em>
</td>
<td class="x-btn-mr">
</tr>
<tr>
</tbody>
</table>
</div>
Scenerio:In a webpage there are few tables present. I want to read one of the table completely, but the problem is only 10 rows are displayed, for rest i have to scroll down. Actually originally only 10 row are available, when we scroll rest of the filed are rendered.
To solve this i thought i will simulate key down and keep reading, but the problem is even the xpath is not consistent through out so cannot put in a loop too. Xpath for few different cells are:
html/body/div[2]/form/div[1]/div[2]/div/div[2]/div/div[2]/div/div[2]/div/div[2]/div/span/div[1]/div/div/div/div[2]/div/div[2]/table/tbody/tr[1]/td[1]
html/body/div[2]/form/div[1]/div[2]/div/div[2]/div/div[2]/div/div[2]/div/div[2]/div/span/div[1]/div/div/div/div[2]/div/div[2]/table[2]/tbody/tr[3]/td[1]
html/body/div[1]/form/div[1]/div[2]/div/div[2]/div/div[2]/div/div[2]/div/div[2]/div/span/div[1]/div/div/div/div[2]/div/div[2]/table[1]/tbody/tr[10]/td[1]
In what way can i get data in all the cells ?
HTML Source:
<div id="pt1:ph1" class="x6v">
<table class="xtb" width="0" cellspacing="0" cellpadding="0" border="0" summary="">
<div class="xvp">
<div>
<div id="pt1:pc1" class="xpb xph" _afrclmwmn="['c1','c2','c3','c4','c5','c6','c7','c8','c9','c10']" _afrac="pt1:pc1:md1" style="height: 282px;">
<div id="pt1:pc1::_ahTp" style="height:auto">
<div id="pt1:pc1::_ahCt">
<div id="pt1:pc1:md1" class="xpj xpb" _leafcolclientids="['pt1:pc1:md1:c1','pt1:pc1:md1:c2','pt1:pc1:md1:c3','pt1:pc1:md1:c4','pt1:pc1:md1:c5','pt1:pc1:md1:c6','pt1:pc1:md1:c7','pt1:pc1:md1:c8','pt1:pc1:md1:c9','pt1:pc1:md1:c10','pt1:pc1:md1:c11','pt1:pc1:md1:c12']" _afrfilterable="true" _afrautohr="10" _afrhcc="0" _afrpcid="pt1:pc1" tabindex="0" style="height: 234px;">
<div id="pt1:pc1:md1::ch" class="xz5" _afrcolcount="12" style="overflow: hidden; position: relative; width: 753px;">
<div id="pt1:pc1:md1::db" class="xyy" _afrcolcount="12" style="position: relative; width: 753px; overflow: hidden; height: 170px; z-index: 1;">
<table class="xyz xzr" cellspacing="0" _startrow="0" _rowcount="44" _selstate="{'0':true}" _totalwidth="1260" style="table-layout:fixed;position:relative;width:1260px;">
<tbody>
<tr class="xzn p_AFSelected" _afrrk="0">
<td class="xzk" nowrap="" style="width:100px;">12</td>
<td class="xzk" nowrap="" style="width:100px;">A12</td>
<td class="xzk" nowrap="" style="width:100px;">B12</td>
<td class="xzk" nowrap="" style="width:100px;">B12</td>
<td class="xzk" nowrap="" style="width:100px;">C12</td>
<td class="xzk" nowrap="" style="width:100px;">D12</td>
<td class="xzk" nowrap="" style="width:100px;"> </td>
<td class="xzk" nowrap="" style="width:100px;">K12</td>
<td class="xzk" nowrap="" style="width:100px;"> </td>
<td class="xzk" nowrap="" style="width:100px;"> </td>
<td class="xzk" nowrap="" style="width:100px;"> </td>
<td class="xzk" nowrap="" style="width:100px;">G12</td>
</tr>
<tr class="xzn" _afrrk="1">
<tr class="xzn" _afrrk="2">
<tr class="xzn" _afrrk="3">
<tr class="xzn" _afrrk="4">
<tr class="xzn" _afrrk="5">
<tr class="xzn" _afrrk="6">
<tr class="xzn" _afrrk="7">
<tr class="xzn" _afrrk="8">
<tr class="xzn" _afrrk="9">
</tbody>
</table>
</div>
<div id="pt1:pc1:md1::sm" class="xzu" style="position:absolute;display:none"></div>
<div id="pt1:pc1:md1::ri" class="xz0" style="position:absolute;display:none;overflow:hidden"></div>
<div id="pt1:pc1:md1::dataW" style="display:none"></div>
<div id="pt1:pc1:md1::scroller" tabindex="-1" style="position: absolute; overflow: auto; z-index: 0; width: 770px; top: 46px; height: 187px; right: 0px;">
</div>
</div>
<div id="pt1:pc1::_ahBt" style="height:auto">
<div id="pt1:pc1:_clmCxt" style="display:none">
<div id="pt1:pc1:_PCPop" style="display:none">
<div id="pt1:pc1::_dchDlgC" style="display:none">
</div>
</div>
</div>
</div>
HTML after scrolling.
<div id="pt1:ph1" class="x6v">
<table class="xtb" width="0" cellspacing="0" cellpadding="0" border="0" summary="">
<div class="xvp">
<div>
<div id="pt1:pc1" class="xpb xph" _afrclmwmn="['c1','c2','c3','c4','c5','c6','c7','c8','c9','c10']" _afrac="pt1:pc1:md1" style="height: 282px;">
<div id="pt1:pc1::_ahTp" style="height:auto">
<div id="pt1:pc1::_ahCt">
<div id="pt1:pc1:md1" class="xpj xpb" _leafcolclientids="['pt1:pc1:md1:c1','pt1:pc1:md1:c2','pt1:pc1:md1:c3','pt1:pc1:md1:c4','pt1:pc1:md1:c5','pt1:pc1:md1:c6','pt1:pc1:md1:c7','pt1:pc1:md1:c8','pt1:pc1:md1:c9','pt1:pc1:md1:c10','pt1:pc1:md1:c11','pt1:pc1:md1:c12']" _afrfilterable="true" _afrautohr="10" _afrhcc="0" _afrpcid="pt1:pc1" tabindex="0" style="height: 234px;">
<div id="pt1:pc1:md1::ch" class="xz5" _afrcolcount="12" style="overflow: hidden; position: relative; width: 753px;">
<div id="pt1:pc1:md1::db" class="xyy" _afrcolcount="12" style="position: relative; width: 753px; overflow: hidden; height: 170px; z-index: 1;">
<table class="xyz xzr" cellspacing="0" _startrow="10" _rowcount="44" style="table-layout:fixed;position:relative;width:1260px;">
<tbody>
<tr class="p_AFFocused p_AFSelected xzn" _afrrk="10">
<tr class="xzn" _afrrk="11">
<tr class="xzn" _afrrk="12">
<tr class="xzn" _afrrk="13">
<tr class="xzn" _afrrk="14">
<tr class="xzn" _afrrk="15">
<tr class="xzn" _afrrk="16">
<tr class="xzn" _afrrk="17">
<tr class="xzn" _afrrk="18">
<tr class="xzn" _afrrk="19">
</tbody>
</table>
<table class="xyz xzr" cellspacing="0" _startrow="20" _rowcount="44" style="table-layout:fixed;position:relative;width:1260px;">
</div>
<div id="pt1:pc1:md1::sm" class="xzu" style="position: absolute; display: none; z-index: 5000; visibility: visible; top: 120px; right: 25px;">Fetching Data...</div>
<div id="pt1:pc1:md1::ri" class="xz0" style="position:absolute;display:none;overflow:hidden"></div>
<div id="pt1:pc1:md1::dataW" style="display:none"></div>
<div id="pt1:pc1:md1::scroller" tabindex="-1" style="position: absolute; overflow: auto; z-index: 0; width: 770px; top: 46px; height: 187px; right: 0px;">
</div>
</div>
<div id="pt1:pc1::_ahBt" style="height:auto">
<div id="pt1:pc1:_clmCxt" style="display:none">
<div id="pt1:pc1:_PCPop" style="display:none">
<div id="pt1:pc1::_dchDlgC" style="display:none">
</div>
</div>
</div>
</div>
<div id="pt1:ph2" class="x6v">
</span>
</div>
</div>
try to use this approach:
1) actions builder, advanced user API
MoveMouseAction method in particular - Moving the mouse from its current location to another element.
you can get here more info about actions builder
2) also dont forget to use fluent wait until web element is rendered
public WebElement fluentWait(final By locator){
Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)
.withTimeout(30, TimeUnit.SECONDS)
.pollingEvery(5, TimeUnit.SECONDS)
.ignoring(NoSuchElementException.class);
WebElement foo = wait.until(
new Function<WebDriver, WebElement>() {
public WebElement apply(WebDriver driver) {
return driver.findElement(locator);
}
}
);
return foo; } ;
By xpathElem=By.xpath("html/body/div[2]/form/div[1]/div[2]/div/div[2]/div/div[2]/div/div[2]/div/div[2]/div/span/div[1]/div/div/div/div[2]/div/div[2]/table/tbody/tr[1]/td[1]");
//getting data from cells
fluentWait(xpathElem).getText().trim();
hope this somehow helps you ;-)
I a border container with 3 content panes. left, center, right. A left data grid (left content pane), a right data grid(right content pane), 2 buttons in the center content pane that move things from between grids .
My only problem is formatting of the buttons the buttons always appear at the top of the center content pane. I need them to be horizontally and vertically center of the center pane, regardless of browser size. My experiments have failed to center them.
<div dojoType="dijit.layout.BorderContainer" gutters="false" >
<div dojoType="dijit.layout.ContentPane" style="width: 45%; border: 1px solid lightgray" region="left">
<table id="possibleChoices"
dojoType="dojox.grid.DataGrid"
clientSort="true"
queryOptions="{cache:true}"
store="possibleChoices"
noDataMessage="<s:text name="messages.user.noChoiceAvailable"/>"
rowsPerPage="50">
<thead class="hideDojoLoad">
<tr>
<th width="100%" field="name">possible choices</th>
</tr>
</thead>
</table>
</div>
<div dojoType="dijit.layout.ContentPane" region="center" style="text-align: center; vertical-align: middle ">
<button dojoType="dijit.form.Button" type="button" onclick="add"><s:text name="button.addArrow"/></button><br/>
<button dojoType="dijit.form.Button" type="button" onclick="remove"><s:text name="button.removeArrow"/></button>
</div>
<div dojoType="dijit.layout.ContentPane" style="width: 45%; border: 1px solid lightgray" region="right">
<table id="choose"
dojoType="dojox.grid.DataGrid"
clientSort="true"
queryOptions="{cache:true}"
store="choose"
noDataMessage="No data found"
rowsPerPage="50">
<thead class="hideDojoLoad">
<tr>
<th width="100%" field="name">Choice Made</th>
</tr>
</thead>
</table>
</div>
</div>
Thanks to anyone that can help a beginner for any help.
the trick is putting a border container in the center content pane with an empty content pane that just takes up space.
<div dojoType="dijit.layout.BorderContainer" gutters="false" >
<div dojoType="dijit.layout.ContentPane" style="width: 45%; border: 1px solid lightgray" region="left">
....
</div>
<div dojoType="dijit.layout.ContentPane" region="center">
<div dojoType="dijit.layout.BorderContainer" gutters="false" >
<div dojoType="dijit.layout.ContentPane" region="top" style="height:40%; ">
</div>
<div dojoType="dijit.layout.ContentPane" region="center" style="text-align: center; ">
<button dojoType="dijit.form.Button" type="button" onclick="add" style="vertical-align: middle"><s:text name="button.addArrow"/></button><br/>
<button dojoType="dijit.form.Button" type="button" onclick="remove"><s:text name="button.removeArrow"/></button>
</div>
</div >
</div>
<div dojoType="dijit.layout.ContentPane" style="width: 45%; border: 1px solid lightgray" region="right">
.....
</div>