We Keep Coding

ElementNotInteractableException:Error when setting a value within td element using Selenium and Python

I am trying to enter the number 1 into the MasterPack boxes within this table but get an error telling me it is not interactable.
My code looked like this and produced the element not interactable error
driver.find_element_by_xpath('//*[#id="asnPick_order_0_itemInfo_TABLE"]/div[1]/div/div/div/table/tbody/tr[1]/td[8]')
.send_keys("1")
The HTML for the table is here, I am trying to edit the MasterPack cell, so the line in between 125 and 1. The cell in the table I am trying to edit has no attributes and is blank. The text for the other cells is not listed under an attribute it is just there inbetween the tags.
<tr><td class="">0001</td>
<td class="">1022-0221-00</td>
<td class="">1004850854</td>
<td class="">8809490582667</td>
<td class="">19</td>
<td class="htAutocomplete">Each<div class="htAutocompleteArrow"> </div></td>
<td class="">125</td>
<td class=""></td>
<td class="">1</td>
<td class="htAutocomplete">Each<div class="htAutocompleteArrow"> </div></td>
<td class="">D480 3-STAGE TRUE HEPA AIR PURIFIER</td>
<td class=""><a class="no-border" title="Delete"><i class="fa fa-trash-alt fa-lg" aria-hidden="true"> </i><div class="screen-reader-only">Delete</div></a></td></tr>
I found that I can successfully click on the box using
driver.find_element_by_xpath('//*[#id="asnPick_order_0_itemInfo_TABLE"]/div[1]/div/div/div/table/tbody/tr[1]/td[8]').click()
I believe this is a dynamic table because
When I click on any cell it changes the HTML to show the class = "current highlight" I have a line of code that successfully clicks on the master pack cell. The element not intractable error occurs when I try to send keys
I need to figure out how to edit the numbers without a tag, for example here is the html of another cell that already had text in it.
<td class="">8809490582667</td>
I need to edit those numbers, but in the master pack cell where its blank without getting a element not interactable error.
Here is the html from after I click the master pack box, I don't think clicking it is necessary to enter text but then again, I don't know.
<tr><td class="">0001</td>
<td class="">1022-0221-00</td>
<td class="">1004850854</td>
<td class="">8809490582667</td>
<td class="">19</td>
<td class="htAutocomplete">Each<div class="htAutocompleteArrow"> </div></td>
<td class="">125</td>
<td class="current highlight"></td>
<td class="">1</td>
<td class="htAutocomplete">Each<div class="htAutocompleteArrow"> </div></td><td class="">D480 3-STAGE TRUE HEPA AIR PURIFIER</td><td class=""><a class="no-border" title="Delete"><i class="fa fa-trash-alt fa-lg" aria-hidden="true"> </i><div class="screen-reader-only">Delete</div></a></td></tr>
Any ideas on how to use execute script, setAttribute, or send keys to enter numbers into these td Master Pack boxes?
UPDATE:
I was able to temporarily enter numbers into the box using this code
driver.find_element_by_xpath(
'//*[#id="asnPick_order_0_itemInfo_TABLE"]/div[1]/div/div/div/table/tbody/tr[1]/td[8]').click()
element = WebDriverWait(driver, 10).until(
EC.element_to_be_clickable((By.XPATH, "//table[#class='htCore']//tbody/tr//td[contains(#class, 'highlight')]")))
driver.execute_script('arguments[0].innerHTML = "1"', element)
When this code runs, it correctly places the number one into the box. However, that number one disappears after I click the next button to save the page. I seems like I am only changing the appearance of this form not actually editing the box because it disappears. Why would editing the innerHTML only be temporary?
Any ideas on how to keep the 1 from disappearing or permanently edit/send the key to the html? Thanks
Here is the html for after the number 1 is added.
<td class="current highlight">1</td>

To set the value as 1 within the column MasterPack for the first row you can use the following xpath based Locator Strategy:
Using setAttribute():
element = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//table[#class='htCore']//tbody/tr//td[contains(#class, 'highlight')]")))
driver.execute_script("arguments[0].setAttribute('value','1')", element)
Using setValue():
element = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//table[#class='htCore']//tbody/tr//td[contains(#class, 'highlight')]")))
driver.execute_script("arguments[0].value='1';", element)
Reference
You can find a couple of relevant discussions in:
Selenium Datepicker using JavascriptExecutor
Send keys not working selenium webdriver python

<a> tags not working in AngularJS

I put a calendar of events put together using angular and jquery. A styled button saying +My Schedule adds the data to localStorage which is then pulled in to another page for user's reference. The localStorage function worked fine until it was brought into the Angular template. Clicking the link now cause the page to jump up and there is nothing recorded in the console or localStorage.
A working example of what I am trying to do is at the following url, this page was all hard coded and I am trying to implement the same thing in an Angular template: http://events.latimes.com/festivalofbooks/the-festival/schedule/
Any help would be appreciated.
Here is a fiddle: http://plnkr.co/edit/gaKFWTsACxwCg0i4JCiw?p=preview
Here is the shortened template as I had to paste code here:
<table class="target-stage stage-only" border="0" cellspacing="0"
cellpadding="0" style="border:none;" >
<tr>
<td width="190" valign="top" class="ev-time">{{item.time}}</td>
<td valign="top" class="ev-desc">
<p class="ev-date">{{item.day}}, {{item.date}}, 2015</p>
<strong>{{item.first_name}} {{item.last_name}},</strong> Author of
<em>" {{item.work_title}}"</em><br />
{{item.stage}}
<span class="info-btn"><p class="selctor" rel={{item.rel}}><span
class="addSchd"><b>+ MY SCHEDULE</b></span>
</td>
</tr>
</table>

I'm seeing a few problems here.
First of all, your html is broken. The p-tag is never closed.
<span class="info-btn"><p class="selctor" rel={{item.rel}}><span class="addSchd"><b>+ MY SCHEDULE</b></span>
Second, as far as I've seen from taking a quick look you are dynamically adding content. You can't use (selector).click() on dynamic content, because the selector won't exist at the point that code is called. Instead use on(), which will be applied to dynamically generated content as well like this:
$(document).on("click", ".button", function() {
// do this when class with .button is clicked
});

How to get Submit via Enter key working on Chrome and Firefox (via input type="submit") with access only to CSS

I have an issue with the enter key not submitting data in a form when the enter key is hit in Chrome and Firefox, you have to click on the link:
onclick="javascript:document.EntryForm.TargetAction.value = 'NewDocument'; document.EntryForm.submit();"
I believe this is because the document lacks input type="submit", so I would like to add it into the page.
The problem lies in the fact that the page is generated dynamically by Sage CRM which according to our Sage team does not give us access to modify the scripts. I have however found the CSS! I have used the CSS in the past to change certain aspects of the interface.
Another problem is that although Sage CRM is a relatively new system (I am told) as it was created when Sage sold ACT! the HTML does not seem to comply with what I would describe as best practices (HTML4, no DOCTYPE, elements 20 tables deep, very few class tags and fewer ID tags, I think we got lucky in this case with the .ButtonItem class)
My plan is to change this link (one of many links with no IDs) to the submit input type using css content: and :after and :nth-of-type(1)
<TABLE class=ButtonGroup>
<TBODY>
<TR>
<TD class=ButtonItem>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD width=32><A onfocus="if (event && event.altKey) click();" class=ButtonItem accessKey=F href="javascript:try{checkSubmit(document.EntryForm);}catch(e){document.EntryForm.submit();}"><IMG border=0 src="/CRM/Themes/img/default/Buttons/Search.gif" align=middle></A></TD>
<TD> </TD>
<TD><A onfocus="if (event && event.altKey) click();" class=ButtonItem accessKey=F href="javascript:try{checkSubmit(document.EntryForm);}catch(e){document.EntryForm.submit();}"><FONT style="TEXT-DECORATION: underline">F</FONT>ind</A></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR>
<TD class=ButtonItem>
<TABLE>
<TBODY>
<TR>
<TD><A>a</A></TD>
<TD><!-- Many more of these rows --></TD>
<TD><A>a</FONT>ear</A></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
Is this how you would get the submit on enter to work and if so how would you select the css and insert the html?
And how come IExplorer knows what to do when I hit return but Firefox/Chrome does not if not submit is specified? A best guess?

Hide specific text in a class with jQuery

I have two links in the same class, but only need to remove one of them.
<table class="LinksTable" cellspacing="0" cellpadding="0">
<tbody class="LinksTableFormat">
<tr>
<td>
<a class="LinksText" href="Default.aspx?Page=Shopping Cart Upload">Shopping Cart Upload</a>
</td>
</tr>
<tr>
<td>
<a class="LinksText" href="default.aspx?page=admin page">Admin</a>
</td>
</tr>
</tbody>
The Admin link is set to only show when certain users sign into the site, but Shopping Cart Upload shows to any user. I need to remove the Shopping Cart Upload link without affecting the Admin link.
Is there any way to do this with jQuery, since they are both in the same class?

You can use the attribute contains selector:
$(".LinksText[href*='Shopping']").remove();

Can try with selectors:
$('.LinksText:first').hide(); or .remove()
or
$('.LinksText:last').hide() or .remove()

Selenium IDE fails to find components

I'm testing an ADF application with Selenium IDE. At one point, the automated test case has to click on a button, which has a partialTrigger attribute pointing to a table on the page and after the button executes some background logic, the table is populated with rows, but the page is not fully refreshed.
The problem I'm facing is that the Selenium IDE can't find the table rows after the button click. Possibly, Selenium is not aware of the page's DOM update, but I'm not sure about that.
What I have tried so far is this:
I stored the expected full xpath for a cell in the first row of the table.
Created a self-executing JavaScript function that is used for clicking on the given path.
I have tested the following commands on a simple HTML page and they work fine.
Selenium commands:
<tr>
<td>store</td>
<td>//html[1]/body[1]/div[1]/table[1]/tbody[1]/tr[1]/td[1]</td>
<td>myTableRowPath</td> <!-- store the xpath with name 'myTableRowPath' -->
</tr>
<tr>
<td>storeEval</td>
<td>(function(path) {
var result = selenium.browserbot.getUserWindow()
.document.evaluate(path,
selenium.browserbot.getUserWindow().document,
null,
8,
null).singleNodeValue; result.click();
return null;
})
(${myTableRowPath})
</td>
<td>elementToBeClicked</td>
</tr>
How can I make Selenium IDE aware of any (AJAX) DOM updates on the page ?

Generally when dealing with AJAX on Selenium IDE, you'll want to use a waitForElementPresent type of action.
For instance if your table changes from
<table id="myTable">
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</tbody>
</table>
to
<table id="myTable">
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
<tr>
<td>something</td>
<td>else</td>
</tr>
</tbody>
</table>
You can use:
<tr>
<td>click</td>
<td>//input[#id='myButton']</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//table[#id='myTable']/tbody/tr[2]</td>
<td></td>
</tr>
<tr>
<td>assertText</td>
<td>//table[#id='myTable']/tbody/tr[2]/td</td>
<td>something</td>
</tr>
Here's a JSFiddle I tested it against (no AJAX, but simulating that with a slow JS function).

ADF manipulate the generated HTML in a way that it'll be very hard to maintain an XPath. The easiest way to target specific elements in ADF is giving this element a styleClass and access it using the class attribute.

ADF loads the table UI (whose ID selenium is looking for) before it loads the contents of the table. It is possible your webdriver is looking for the content before it is loaded, so you could explicitly wait for a short period of time before clicking on the row.
Your table might be using lazy load which only loads the contents of the table when you scroll it into view. If your window only shows 5 rows and there are 10 rows in your table, your browser will only load 5 rows. If you ask selenium to look for row 8, it will throw an exception. I solved this by clicking on the first row and driver.switchTo().activeElement().sendKeys(Keys.DOWN); for the number of times the number of the row I am searching for. So I am "scrolling" to the row before accessing it