Selenium webdriver C# :Locating and entering values in a input text element inside a label works on local but not on TeamCity

Question

I have label on my webpage. When i click on the Label, input text field appears. Moving away from this element, will become a label again. I am trying to click the label, clear the text in the input text element and enter text in the input field.

html before click on the label:

    <tbody _ngcontent-c5="">
<!--bindings={
  "ng-reflect-ng-for-of": "[object Object]" }-->
<tr _ngcontent-c5="">
<td _ngcontent-c5="" class="check-box" style="border-right:#dcdcdc;">
<input _ngcontent-c5="" name="isSelected" type="checkbox" id="parameter[0].isSelected" data-index="0"></td>
<td _ngcontent-c5="" class="max-width non-editable-cell">All Countries</td>
<td _ngcontent-c5="" class="max-width non-editable-cell">All Store Affluences</td>
<td _ngcontent-c5="" class="med-width non-editable-cell">
<!--bindings={"ng-reflect-ng-if": "true" }-->
<div _ngcontent-c5="" id="parameter[0].planogramNameLabel">Master Range</div>
<!--bindings={}-->
</td>

html after clicking on the label:

<tbody _ngcontent-c5=""> <!--bindings={ "ng-reflect-ng-for-of": "[object Object]"
}--><tr _ngcontent-c5="">
<td _ngcontent-c5="" class="check-box" style="border-right:#dcdcdc;">
<input _ngcontent-c5="" name="isSelected" type="checkbox" id="parameter[0].isSelected" data-index="0"></td>
<td _ngcontent-c5="" class="max-width non-editable-cell">All Countries</td>
<td _ngcontent-c5="" class="max-width non-editable-cell">All Store Affluences</td>
<td _ngcontent-c5="" class="med-width non-editable-cell">
<!--bindings={"ng-reflect-ng-if": "false"}-->
<!--bindings={ "ng-reflect-ng-if": "true"}-->
<input _ngcontent-c5="" class="planogram-parameter-input ng-untouched ng-pristine ng-valid" name="planogramName" type="text" ng-reflect-name="planogramName" ng-reflect-model="Master Range" id="parameter[0].planogramName" data-index="0">
</td>

The label is a dynamic element.

Please find my code:

IWebElement planogramNameLabelelement = Driver.FindElement(By.Id(Constants.Ids["PLANOGRAM_LABEL"]));
wait.Until(ExpectedConditions.ElementToBeClickable(planogramNameLabelelement));
Actions action = new Actions(Driver);
action.MoveToElement(planogramNameLabelelement).Click().Build().Perform();

IWebElement planogramNameelement = Driver.FindElement(By.Id(Constants.Ids["PLANOGRAM_NAME"]));
planogramNameelement.Clear();   
planogramNameelement.SendKeys(planogramname);

This code runs perfectly fine in my local. When i try to run these tests on TeamCity. Its unable to locate planogramNameElement.

Please find the error below:

OpenQA.Selenium.NoSuchElementException : no such element: Unable to locate element: {"method":"id","selector":"parameter[0].planogramName"} (Session info: chrome=61.0.3163.100) (Driver info: chromedriver=2.30.477700 (0057494ad8732195794a7b32078424f92a5fce41),platform=Windows NT 6.3.9600 x86_64)

at penQA.Selenium.Remote.RemoteWebDriver.UnpackAndThrowOnError(Response errorResponse)

at OpenQA.Selenium.Remote.RemoteWebDriver.Execute(String driverCommandToExecute, Dictionary`2 parameters)

at OpenQA.Selenium.Remote.RemoteWebDriver.FindElement(String mechanism, String value)

at Automation_Dunnhumby_Framework.Steps.SpaceRecsRequestSteps.GivenIEnterShelfdepthShelfHeightTotalmodsModulelengthShelvespermoduleInTheField(String planogramname, String shelfdepth, String shelfheight, String totalmods, String modulelength, String shelvespermodule) in D:\BuildAgent\work\7f925fcfe8130d53\Automation_Dunnhumby_Framework\Automation_Dunnhumby_Framework\Steps\SpaceRecsRequestSteps.cs:line 53

at TechTalk.SpecFlow.Bindings.BindingInvoker.InvokeBinding(IBinding binding, IContextManager contextManager, Object[] arguments, ITestTracer testTracer, TimeSpan& duration)

at TechTalk.SpecFlow.Infrastructure.TestExecutionEngine.ExecuteStepMatch(BindingMatch match, Object[] arguments)

at TechTalk.SpecFlow.Infrastructure.TestExecutionEngine.ExecuteStep(IContextManager contextManager, StepInstance stepInstance)

at TechTalk.SpecFlow.Infrastructure.TestExecutionEngine.OnAfterLastStep()

Answer 1

A couple of observations from the HTML you provided:

1. The AUT (Application Under Test) uses Javascript/Ajax Calls which is clear from the attributes e.g. id="parameter[0].isSelected"

2. Once you click the label then the input text field appears. So there is a delta time difference between the click() and rendering of the input text field which is not taken into consideration in your script as in your code block just after Perform() you are trying to Clear() the input text field as follows:

   action.MoveToElement(planogramNameLabelelement).Click().Build().Perform();
   IWebElement planogramNameelement = Driver.FindElement(By.Id(Constants.Ids["PLANOGRAM_NAME"]));
   planogramNameelement.Clear();
   

Solution:

A proper solution to your issue would be to induce ExplicitWait i.e. WebDriverWait with ExpectedConditions as ElementToBeClickable for the input text field to be clickable as follows:

action.MoveToElement(planogramNameLabelelement).Click().Build().Perform();
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
IWebElement planogramNameelement = wait.Until(ExpectedConditions.ElementToBeClickable(By.Id(Constants.Ids["PLANOGRAM_NAME"]));
planogramNameelement.Clear();