I want to create a frontend test and use Selenium and Chrome for it. I am confused because the same element is found only once with the same code. But I need it in two places Here is my Code
Actions action = new Actions(driver);
action.MoveToElement(driver.FindElement(By.CssSelector(".pane-container")), 50, 50).ClickAndHold().MoveByOffset(50, 50).Release().Perform();
driver.Navigate().Refresh();
Actions drawBoundingBox = new Actions(driver);
drawBoundingBox.MoveToElement(driver.FindElement(By.CssSelector(".pane-container"))); //NoSuchElementException
the driver has an implicit wait of a few seconds. When I try to find it for the second time I get a NoSuchElementException. OpenQA.Selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":".pane-container"}
When I remove the first one the second one works:
driver.Navigate().Refresh();
Actions drawBoundingBox = new Actions(driver);
drawBoundingBox.MoveToElement(driver.FindElement(By.CssSelector(".pane-container")));
->no Exception
Is the Element somehow blocked when first used?
Edit: I inspected the HTML of the website. As far as I can tell, there is no relevant difference between the elements.
Element when referenced first:
<div class="pane-container selected">
<div class="mat-elevation-z2 label-options" style="transform: translate(49.9023px, 109.785px);">
<rcv-selected-label-options _ngcontent-ftq-c196="" _nghost-ftq-c195="">
<mat-form-field _ngcontent-ftq-c195="" class="mat-form-field label-select ng-tns-c70-4 mat-primary mat-form-field-type-mat-select mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-has-label mat-form-field-hide-placeholder mat-form-field-should-float">
<div class="mat-form-field-wrapper ng-tns-c70-4">
<div class="mat-form-field-flex ng-tns-c70-4">
<!----><!---->
<div class="mat-form-field-infix ng-tns-c70-4">
<mat-select _ngcontent-ftq-c195="" role="combobox" aria-autocomplete="none" aria-haspopup="true" required="" class="mat-select ng-tns-c87-5 ng-tns-c70-4 mat-select-required ng-star-inserted" aria-labelledby="mat-form-field-label-1 mat-select-value-5" id="mat-select-4" tabindex="0" aria-expanded="false" aria-required="true" aria-disabled="false" aria-invalid="false">
<div cdk-overlay-origin="" class="mat-select-trigger ng-tns-c87-5">
<div class="mat-select-value ng-tns-c87-5" id="mat-select-value-5">
<!---->
<span class="mat-select-value-text ng-tns-c87-5 ng-star-inserted">
<span class="mat-select-min-line ng-tns-c87-5 ng-star-inserted">Klasse 1</span><!----><!---->
</span>
<!---->
</div>
<div class="mat-select-arrow-wrapper ng-tns-c87-5">
<div class="mat-select-arrow ng-tns-c87-5"></div>
</div>
</div>
<!---->
</mat-select>
<span class="mat-form-field-label-wrapper ng-tns-c70-4">
<label class="mat-form-field-label ng-tns-c70-4 ng-star-inserted" id="mat-form-field-label-1" for="mat-select-4" aria-owns="mat-select-4">
<span class="ng-tns-c70-4 ng-star-inserted">Select object class</span><!----><!----><!----><span aria-hidden="true" class="mat-placeholder-required mat-form-field-required-marker ng-tns-c70-4 ng-star-inserted"> *</span><!---->
</label>
<!---->
</span>
</div>
<!---->
</div>
<div class="mat-form-field-underline ng-tns-c70-4 ng-star-inserted"><span class="mat-form-field-ripple ng-tns-c70-4"></span></div>
<!---->
<div class="mat-form-field-subscript-wrapper ng-tns-c70-4">
<!---->
<div class="mat-form-field-hint-wrapper ng-tns-c70-4 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);">
<!---->
<div class="mat-form-field-hint-spacer ng-tns-c70-4"></div>
</div>
<!---->
</div>
</div>
</mat-form-field>
<!---->
</rcv-selected-label-options>
</div>
<svg id="SvgjsSvg1006" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 1280 1024">
<defs id="SvgjsDefs1007"></defs>
<g id="SvgjsG1008" class="svg-cursor" style="display: none;" transform="matrix(1,0,0,1,1194.5501708984375,678.3675537109375)">
<line id="SvgjsLine1142" x1="-186.58038147138961" y1="75" x2="336.5803814713896" y2="75" fill="none" stroke-dasharray="6.975476839237056 6.975476839237056" stroke="#000000" stroke-width="6.975476839237056"></line>
<line id="SvgjsLine1143" x1="75" y1="-186.58038147138961" x2="75" y2="336.5803814713896" fill="none" stroke-dasharray="6.975476839237056 6.975476839237056" stroke="#000000" stroke-width="6.975476839237056"></line>
<line id="SvgjsLine1144" x1="22.68392370572208" y1="75" x2="127.31607629427792" y2="75" fill="none" stroke-dasharray="0 6.975476839237056 0" stroke="#ffffff" stroke-width="6.975476839237056"></line>
<line id="SvgjsLine1145" x1="75" y1="22.68392370572208" x2="75" y2="127.31607629427792" fill="none" stroke-dasharray="0 6.975476839237056 0" stroke="#ffffff" stroke-width="6.975476839237056"></line>
</g>
<rect id="SvgjsRect1101" width="50" height="50" x="50" y="50" class="bounding-box" fill-opacity="0.4" fill="#ff0000" stroke-opacity="1" stroke-width="0" stroke="#ff0000"></rect>
<g id="SvgjsG1132" transform="matrix(1,0,0,1,50,50)">
<rect id="SvgjsRect1133" width="50" height="50" class="svg_select_boundingRect svg_select_points"></rect>
<rect id="SvgjsRect1134" width="24.4141689373297" height="24.4141689373297" stroke="#000000" stroke-width="3.487738419618528" fill="#000000" x="-12.20708446866485" y="-12.20708446866485" class="svg_select_points_lt svg_select_points"></rect>
<rect id="SvgjsRect1135" width="24.4141689373297" height="24.4141689373297" stroke="#000000" stroke-width="3.487738419618528" fill="#000000" x="37.792915531335154" y="-12.20708446866485" class="svg_select_points_rt svg_select_points"></rect>
<rect id="SvgjsRect1136" width="24.4141689373297" height="24.4141689373297" stroke="#000000" stroke-width="3.487738419618528" fill="#000000" x="37.792915531335154" y="37.792915531335154" class="svg_select_points_rb svg_select_points"></rect>
<rect id="SvgjsRect1137" width="24.4141689373297" height="24.4141689373297" stroke="#000000" stroke-width="3.487738419618528" fill="#000000" x="-12.20708446866485" y="37.792915531335154" class="svg_select_points_lb svg_select_points"></rect>
<rect id="SvgjsRect1138" width="24.4141689373297" height="24.4141689373297" stroke="#000000" stroke-width="3.487738419618528" fill="#000000" x="12.79291553133515" y="-12.20708446866485" class="svg_select_points_t svg_select_points"></rect>
<rect id="SvgjsRect1139" width="24.4141689373297" height="24.4141689373297" stroke="#000000" stroke-width="3.487738419618528" fill="#000000" x="37.792915531335154" y="12.79291553133515" class="svg_select_points_r svg_select_points"></rect>
<rect id="SvgjsRect1140" width="24.4141689373297" height="24.4141689373297" stroke="#000000" stroke-width="3.487738419618528" fill="#000000" x="12.79291553133515" y="37.792915531335154" class="svg_select_points_b svg_select_points"></rect>
<rect id="SvgjsRect1141" width="24.4141689373297" height="24.4141689373297" stroke="#000000" stroke-width="3.487738419618528" fill="#000000" x="-12.20708446866485" y="12.79291553133515" class="svg_select_points_l svg_select_points"></rect>
</g>
</svg>
</div>
Element when referenced second time:
<div class="pane-container selected">
<div class="mat-elevation-z2 label-options hidden" style="transform: translate(-10000px, -10000px);">
<rcv-selected-label-options _ngcontent-rqy-c196="" _nghost-rqy-c195="">
<mat-form-field _ngcontent-rqy-c195="" class="mat-form-field label-select ng-tns-c70-4 mat-primary mat-form-field-type-mat-select mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-has-label mat-form-field-hide-placeholder">
<div class="mat-form-field-wrapper ng-tns-c70-4">
<div class="mat-form-field-flex ng-tns-c70-4">
<!----><!---->
<div class="mat-form-field-infix ng-tns-c70-4">
<mat-select _ngcontent-rqy-c195="" role="combobox" aria-autocomplete="none" aria-haspopup="true" required="" class="mat-select ng-tns-c87-5 ng-tns-c70-4 mat-select-required mat-select-empty ng-star-inserted" aria-labelledby="mat-form-field-label-1 mat-select-value-5" id="mat-select-4" tabindex="0" aria-expanded="false" aria-required="true" aria-disabled="false" aria-invalid="false">
<div cdk-overlay-origin="" class="mat-select-trigger ng-tns-c87-5">
<div class="mat-select-value ng-tns-c87-5" id="mat-select-value-5">
<span class="mat-select-placeholder mat-select-min-line ng-tns-c87-5 ng-star-inserted">Select object class</span><!----><!---->
</div>
<div class="mat-select-arrow-wrapper ng-tns-c87-5">
<div class="mat-select-arrow ng-tns-c87-5"></div>
</div>
</div>
<!---->
</mat-select>
<span class="mat-form-field-label-wrapper ng-tns-c70-4">
<label class="mat-form-field-label ng-tns-c70-4 mat-empty mat-form-field-empty ng-star-inserted" id="mat-form-field-label-1" for="mat-select-4" aria-owns="mat-select-4">
<span class="ng-tns-c70-4 ng-star-inserted">Select object class</span><!----><!----><!----><span aria-hidden="true" class="mat-placeholder-required mat-form-field-required-marker ng-tns-c70-4 ng-star-inserted"> *</span><!---->
</label>
<!---->
</span>
</div>
<!---->
</div>
<div class="mat-form-field-underline ng-tns-c70-4 ng-star-inserted"><span class="mat-form-field-ripple ng-tns-c70-4"></span></div>
<!---->
<div class="mat-form-field-subscript-wrapper ng-tns-c70-4">
<!---->
<div class="mat-form-field-hint-wrapper ng-tns-c70-4 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);">
<!---->
<div class="mat-form-field-hint-spacer ng-tns-c70-4"></div>
</div>
<!---->
</div>
</div>
</mat-form-field>
<!---->
</rcv-selected-label-options>
</div>
<svg id="SvgjsSvg1006" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 1280 1024">
<defs id="SvgjsDefs1007"></defs>
<g id="SvgjsG1008" class="svg-cursor" style="display: none;" transform="matrix(1,0,0,1,1191.0623779296875,364.4643859863281)">
<line id="SvgjsLine1013" x1="-186.58038147138961" y1="75" x2="336.5803814713896" y2="75" fill="none" stroke-dasharray="6.975476839237056 6.975476839237056" stroke="#000000" stroke-width="6.975476839237056"></line>
<line id="SvgjsLine1014" x1="75" y1="-186.58038147138961" x2="75" y2="336.5803814713896" fill="none" stroke-dasharray="6.975476839237056 6.975476839237056" stroke="#000000" stroke-width="6.975476839237056"></line>
<line id="SvgjsLine1015" x1="22.68392370572208" y1="75" x2="127.31607629427792" y2="75" fill="none" stroke-dasharray="0 6.975476839237056 0" stroke="#ffffff" stroke-width="6.975476839237056"></line>
<line id="SvgjsLine1016" x1="75" y1="22.68392370572208" x2="75" y2="127.31607629427792" fill="none" stroke-dasharray="0 6.975476839237056 0" stroke="#ffffff" stroke-width="6.975476839237056"></line>
</g>
</svg>
</div>