Unable to locate an element in selenium webdriver using name and xpath - selenium

Am very new to Selenium just learnt few things and trying to automate.Unable to locate an element in Selenium webdriver for the below one:
<tbody class="jira-restfultable-create">
<tr class="jira-restfultable-row jira-restfultable-editrow jira restfultable-focused">
<td class="jira-restfultable-order">
<td></td>
<td><textarea class="ztextarea noresize ztextarea-step" rows="4" name="step"> </textarea>
</td>
<td>
I have written code like
driver.findElement(By.name("step")).sendKeys("step-1");
and also tried with
driver.findElement(By.xpath("//*[#name = 'ztextarea noresize ztextarea-step']")).sendKeys("step-1");
Anyone please help me.
And also please suggest some sites or links to learn more about locators especially xpath. I tried few but not getting it in depth.
Thanks in advance.
<!DOCTYPE html>
<html class="mozilla">
<head>
<body id="jira" class="aui-layout aui-theme-default ka ajax-issue-search-and-view page-type-navigator navigator-issue-only" data-version="6.2" data-aui-version="5.3.5">
<div id="page">
<header id="header" role="banner">
<fieldset class="parameters hidden dont-default-focus">
<script type="text/javascript">
<nav class="aui-header aui-dropdown2-trigger-group" role="navigation" data-aui-responsive="true">
<div class="aui-header-inner">
<div class="aui-header-primary">
<h1 id="logo" class="aui-header-logo aui-header-logo-custom">
<ul class="aui-nav" style="width: auto;">
<li>
<li>
<li>
<li>
<li>
<a id="zephyr_je.topnav.tests" class="aui-nav-link aui-dropdown2-trigger " aria-owns="zephyr_je.topnav.tests-content" aria-haspopup="true" title="Zephyr Test Management and Execution" href="/secure/ZephyrWelcome.jspa">Tests</a>
<div id="zephyr_je.topnav.tests-content" class="aui-dropdown2 aui-style-default">
</li>
<li style="display: none;">
<li id="create-menu">
</ul>
</div>
<div class="aui-header-secondary">
</div>
</nav>
</header>
<section id="content" role="main">
<div class="issue-container" tabindex="-1">
<div id="issue-content" class="issue-edit-form">
<div class="stalker-placeholder issue-header js-stalker" style="visibility: hidden; height: 135px; width: 1349px;"></div>
<header id="stalker" class="issue-header js-stalker detached" style="position: fixed; top: 0px; left: 0px;">
<div class="issue-body-content">
<div class="aui-group issue-body">
<div class="aui-item issue-main-column">
<div id="details-module" class="module toggle-wrap">
<div id="descriptionmodule" class="module toggle-wrap">
<div id="view_issue_steps_section" class="module toggle-wrap">
<div id="view_issue_steps_section_heading" class="mod-header">
<div class="mod-content">
<div id="project-config-panel-versions" class="project-config-panel">
<form id="project-config-versions-add" class="aui" action="#">
<table id="project-config-steps-table" class="aui jira-restfultable jira-restfultable-allowhover">
<thead>
<tbody class="ui-sortable">
<tbody class="jira-restfultable-create">
<tr class="jira-restfultable-row jira-restfultable-editrow jira-restfultable-focused">
<td class="jira-restfultable-order">
<td></td>
<td style="height: 81px;">
<textarea class="ztextarea noresize ztextarea-step" rows="4" name="step" style="height: 72px;"></textarea>
</td>
<td style="height: 81px;">
<td style="height: 81px;">
<td class="jira-restfultable-operations">
<div class="restfultable-operations-wrapper">
<input class="aui-button" type="submit" value="Add" accesskey="s">
</div>
</td>
<td class="jira-restfultable-throbber"></td>
</tr>
</tbody>
</table>
</form>
<div id="project-config-error-console"></div>
</div>
</div>
</div>
<div id="view_issue_execution_section" class="module toggle-wrap">
<div id="view_issue_execution_section_heading" class="mod-header">
<div class="mod-content">
</div>
<div id="activitymodule" class="module toggle-wrap">
<div id="addcomment" class="module">
<div class="mod-content">
<div class="mod-footer">
</div>
</div>
<div id="viewissuesidebar" class="aui-item issue-side-column">
</div>
</div>
</div>
</div>
<fieldset class="hidden parameters">
<div id="systemFiltersJson" style="display:none;">[{"id":-1,"name":"My Open Issues","jql":"assignee = currentUser() AND resolution = Unresolved ORDER BY updatedDate DESC","isSystem":true,"sharePermissions":[],"requiresLogin":true},{"id":-2,"name":"Reported by Me","jql":"reporter = currentUser() ORDER BY createdDate DESC","isSystem":true,"sharePermissions":[],"requiresLogin":true},{"id":-3,"name":"Recently Viewed","jql":"issuekey in issueHistory() ORDER BY lastViewed DESC","isSystem":true,"sharePermissions":[],"requiresLogin":false},{"id":-4,"name":"All Issues","jql":"ORDER BY createdDate DESC","isSystem":true,"sharePermissions":[],"requiresLogin":false}]</div>
<div id="inline-dialog-c14577633211060" class="aui-inline-dialog aui-help-tip" style="top: 116px; right: 10px; display: none;">
</section>
<footer id="footer" role="contentinfo">
</div>
<div id="fancybox-tmp"></div>
<div id="fancybox-loading">
<div id="fancybox-overlay"></div>
<div id="fancybox-wrap">
<div id="edit-issue-dialog" class="jira-dialog box-shadow" style="display: none;">
<div id="create-subtask-dialog" class="jira-dialog box-shadow" style="display: none;">
</body>
</html>


try following code.
//Get by Name
driver.findElement(By.name("step")).sendKeys("step-1");
// Get by Tag Name
driver.findElement(By.tagName("textarea")).sendKeys("step-1");
//Get element using css selector
WebElement textArea= driver.findElement(By.cssSelector("textarea[name='step']"));

Related

I'm getting ERROR [app-router] Error: Route not found: /pane02 when trying to navigate to href inside the HTML in Aurelia

I'm trying to insert a navigation tab that will be displayed underneath the main one when the user clicks on the Pane5, but when I click on the child element (Pane01 or Pane02) I get app-router error. Is this happening because of nesting bootstrap
Here is an example of how HTML is structured in the page:
<template>
<div>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6">
<h3 class=""><span t="asset_details"></span>SomeElement</h3>
</div>
<div class="col-lg-6">
<a class="pull-right"><i class="fa fa-window-close fa-2x"></i></a>
</div>
</div>
<div class="row">
<ul class="nav nav-pills">
<li><a data-toggle="tab" href="#pane1"><span>Details</span></a></li>
<li><a data-toggle="tab" href="#pane2"><span>Details</span></a></li>
<li><a data-toggle="tab" href="#pane3"><span>Other</span></a></li>
<li><a data-toggle="tab" href="#pane4"><span>Element</span></a></li>
<li><a data-toggle="tab" href="#pane6"><span>Element</span></a></li>
<li><a data-toggle="tab" href="#pane5"><span>Element</span></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="pane1">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6">
<compose>
</compose>
</div>
<div class="col-lg-6">
<compose></compose>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<compose></compose>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane2">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<!--<commercial-line device-id.bind="deviceId"></commercial-line>-->
<compose></compose>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane3">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6">
<compose></compose>
</div>
<div class="col-lg-6">
<compose></compose>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane4">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<compose></compose>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane5">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-pills">
<li class="active"><span>History</span></li>
<li if.bind="!history"><span>Param</span></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="pane01">
<div class="col-lg-12">
<div class="row">
<table class="table table-hover table-condensed" ref="theTable">
<thead>
<th>
<span>Afla</span>
</th>
<th class="col-lg-2">
<span>Beta</span>
</th>
<th>
<span>Gama</span>
</th>
<th>
<span>Gama</span>
</th>
<th>
</th>
</thead>
<tbody>
<tr repeat.for="element of Array">
<td>
<span>${element.first}</span>
</td>
<td class="col-lg-2">
<span >${element.second}</span>
</td>
<td>
<span>${element.third}</span>
</td>
<td>
<span>${element.fourth}</span>
</td>
<td >
<span>${element.fifth}</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane" id="pane02">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<table class="table table-hover table-condensed">
<thead>
<th>
<span>Alfa</span>
</th>
<th>
<span>Beta</span>
</th>
<th>
<span>Gama</span>
</th>
<th>
<span>Gama</span>
</th>
<th>
<span>Example</span>
</th>
<th>
<span>Inte</span>
</th>
</thead>
<tbody>
<tr repeat.for="item of array">
<td>
<span date-time>${item.date}</span>
</td>
<div class="divider"></div>
<td>
<span date-time>${item.date2}</span>
</td>
<td>
<span>${item.user}</span>
</td>
<td>
<span>${item.array1}</span>
</td>
<td>
<span>${item.array2}</span>
</td>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane6">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<compose view-model="view-model">
</compose>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

add a router-ignore attribute to your a tag. so that aurelia will not activate the routing logic wen clicked on your link.
more on that topic can be found in the docs: https://aurelia.io/docs/routing/handling-links#basic-concept

Alternative way to href in Bootstrap is data-target. So if you want to do:
<a href="#panel-1">
then you can instead do:
<a data-target="#panel-1">
They are identical. The upside with data-target is it can support multiple selector

Selenium:- Popup handelling in HTML

I am using Firefox Quantum.
It's something different than Mozzila firefox. I can't use firebug now as it is not supporting.How can i verify that the i am on a different frame.
As currently i can't write on the popup message. Maybe it is on different frame.
Can anyone explain me with proper example.
The HTMLM of the code is:-
<div class="store_form">
<div class="row">
<div class="col s12 m12 marg-top">
<div class="row">
<div class="col s12 m6 store_band_contact">
</div>
<div class="col s12 m6 store_add_left">
</div>
</div>
</div>
<form id="form_contact" class="col s12 m12" novalidate="novalidate">
<div id="errorMsg"></div>
<!-- <div class="row">
<p class="col s12" style="font-size: 15px;" >
<strong id="buyer_company"></strong>
</p>
</div> -->
<!-- <div class="row">
<p class="col s12" id="">Subject: Request to remove my bid
</p>
</div> -->
<div class="row">
<div class="input-field col s12">
<span class="editFiledHeading">Request to remove my bid</span>
<!-- Contact Seller -->
<textarea name="comment" maxlength="20000" id="comment" class="ckeditor" placeholder="" style="visibility: hidden; display: none;"></textarea><div id="cke_comment" class="cke_1 cke cke_reset cke_chrome cke_editor_comment cke_ltr cke_browser_webkit" dir="ltr" lang="en" role="application" aria-labelledby="cke_comment_arialbl" style="width: 99.8%;"><span id="cke_comment_arialbl" class="cke_voice_label">Rich Text Editor, comment</span><div class="cke_inner cke_reset" role="presentation"><span id="cke_1_top" class="cke_top cke_reset_all" role="presentation" style="height: auto; user-select: none;"><span id="cke_12" class="cke_voice_label">Editor toolbars</span><span id="cke_1_toolbox" class="cke_toolbox" role="group" aria-labelledby="cke_12" onmousedown="return false;"></span></span><div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 200px;"><span id="cke_16" class="cke_voice_label">Press ALT 0 for help</span><iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Rich Text Editor, comment" aria-describedby="cke_16" tabindex="0" allowtransparency="true" style="width: 439px; height: 100%;"></iframe></div></div></div>
<input type="hidden" name="bid" id="bid_id" value="1035">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col s6">
<p style="margin: 5px 0 0;">
<input type="checkbox" name="is_copy" id="is_copy" value="1">
<label for="is_copy">Send me a copy</label>
</p>
</div>
<div class="col s6">
<span class="right remainingLimit" id="comment_label" data-length="2500">Remaining: 2500</span>
</div>
</div>
<div class="row">
<div class="col s12">
<p class="defaultP">
If you like to remove a bid you can do that by
sending the request to the seller. Please make
sure that you state the reason for doing this.
Obvious accidents by using the wrong value are
easy to justify.
Please note that it is up to the seller to accept
or decline your request!
</p>
</div>
</div>
<div class="row">
<div class="col s12 center" style="margin: 20px 0 15px;">
<button class="transParentBtnSmall">Submit</button>
</div>
</div>
</form>
</div>
</div>

pass data to modal in vue.js app

I created a vue app in cli. And I have a List component file:
<template>
<div class="container">
<h1 class="text-center">List member</h1>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">ID</th>
<th class="text-center">Name</th>
<th class="text-center">Birthday</th>
<th class="text-center">Score</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td class="text-center">{{ person.id }}</td>
<td class="text-center">{{ person.name }}</td>
<td class="text-center">{{ person.birthday }}</td>
<td class="text-center">{{ person.score }}</td>
<td class="text-center">
<b-btn v-b-modal.my-modal>Edit</b-btn>
</td>
</tr>
</tbody>
</table>
And I have modal component in this file:
<!-- Modal Component -->
<b-modal id="my-modal" ref="modal" title="Edit profile" #ok="handleOk"
#shown="clearName">
<form #submit.stop.prevent="handleSubmit">
<b-form-input type="text">{{ person.name }}</b-form-input>
<br>
<b-form-input type="text"></b-form-input>
<br>
<b-form-input type="text"></b-form-input>
</form>
</b-modal>
</div>
</div>
</template>
How can I pass data in a row (person) to modal when I click Edit button?
Thanks

in my case i fixed this with bootstrap modal and JQuery
1- HTML Modal
<div class="modal fade bd-example-modal-lg" id="document-details-modal" tabindex="-1" aria-labelledby="document-details-modal" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">modal-title-details-document</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-title</div>
<span id="document-details-document-title"></span>
</p>
</div>
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-source-info</div>
<span id="document-details-document-source-info"></span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-author</div>
<span id="document-details-document-author"></span>
</p>
</div>
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-language</div>
<span id="document-details-document-language"></span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-description</div>
<span id="document-details-document-description"></span>
</p>
</div>
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-comments</div>
<span id="document-details-document-comments"></span>
</p>
</div>
</div>
</div>
<div class="modal-footer">
<div class="text-center">
<button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close">ok</button>
</div>
</div>
</div>
</div>
</div>
2- Vuejs Call
<i class="bi bi-info-circle" v-on:click="setDocumentDetails(libraryItem)"></i>
3- Vuejs Funcation
setDocumentDetails: function (libraryItem) {
$('#document-details-document-title').text(libraryItem.Title);
$('#document-details-document-description').text(libraryItem.Description);
$('#document-details-document-source-info').text(libraryItem.SourceInfo);
$('#document-details-document-comments').text(libraryItem.Comments);
$('#document-details-document-author').text(libraryItem.Author);
$('#document-details-document-language').text(libraryItem.Language);
$('#document-details-modal').modal('show');
}

I am not sure this will work, and even less sure that this is elegant, but if they are in the same file, you could try having a currentPerson property that you set to person when this button is clicked. Like
<b-btn #click="currentPerson = person" v-b-modal.my-modal>Edit</b-btn>
and then just use {{currentPerson.name}} in the modal.

vba code to click on each tabs( View Contact) in webpage using selenium vba

I want to click on all View Contact tabs in webpage,there are 10 View Contact tabs in webpage. each tabs having the same html code
Please see the image of webpage.
https://i.stack.imgur.com/vTocP.jpg
my html code:-
<input type="button" class="boxOpener btn blue b" style="width: 150px;font-size: 14px;" value="View Contact">
<input type="button" class="boxOpener btn blue b" style="width: 150px;font-size: 14px;" value="View Contact">
The HTML is :
<div id="226235653" class="lmsSearchTpl1">
<div class="lmsSearchTplDetail">
<div class="lmsTplQualify">
<span class="hasEllipse">
<i class="lmsIcons requirement-verified-tuple"></i>
<div id="expelipse" class="infoTip f12 ital tool_tip6" style="width: 200px; top: 40px; left: -15px; display: none;"><em class="upPin"></em><em class="text">Verified: Lead’s information has been verified by our system.</em></div>
</span>
<!-- Classes of such icons : mobile-verified-tuple, mobile-exist-tuple, requirement-verified-tuple -->
</div>
<div class="clearAfter">
<div class="bulkSmsTupleCheckboxDiv lf" style="width: 4%;display: none;">
<input type="checkbox" class="bulkSmsTupleCheckbox" id="tuplecheckbox_226235653" value="226235653_27395571" onclick="leadSrch.listUnlistForSms(this)">
</div>
<div class="lf lmsIndName">
Arjun Singh </div>
<div class="rf lmsTplDate">
<span>Received : </span>
<span class="sb" style="color: #666;">10 Dec 2017</span>
</div>
</div>
<div class="clearAfter rel">
<div class="lf lmsTypeAndAddress f13">
<div>
<span class="sb"><span>Residential Apartment</span></span>
<span>for</span>
<span class="sb">Rent</span>
</div>
<div>
<span>City :</span>
<span class="sb"><span>Kolkata South</span></span>
<span> | </span>
<span>Locality : </span>
<span class="sb"><span>Tollygunge</span></span>
</div>
</div>
<div class="rf">
<i></i>
</div>
</div>
<div class="clr" style="height: 10px;"></div>
<div class="clearAfter tabularFacts">
<div>
<div>Min Budget</div>
<div>5,000 </div>
</div>
<div>
<div>Bedrooms</div>
<div>2 BHK</div>
</div>
<div>
<div>Car Parking</div>
<div>----</div>
</div>
<div>
<div>Furnishing</div>
<div><span>Unfurnished</span></div>
</div>
<div>
<div>Tenant Type</div>
<div>----</div>
</div>
<div>
<div>Projects</div>
<div>----</div>
</div>
<div>
<div>Preferred Call Time</div>
<div>Any Time</div>
</div>
<div>
<div>Site Visit </div>
<div>----</div>
</div>
</div>
<div class="clearAfter tabularOtherFacts mt20">
<div>
<span>Requirements : </span>
<span>----</span>
</div>
</div>
</div>
<div class="lmsViewMoreLine clearAfter">
<div class="lf" style="padding: 0px 15px 5px 15px;">
<a id="vmr_226235653" href="javascript:void(0);" class="vmr inlineMiddleChild lmsViewMore">
<span>
View more requirements from this buyer
</span>
<i class="lmsIcons lmsBlueArrow ml5"></i>
</a>
<div class="clr" style="height: 10px;"></div>
<div id="vmrWrap_226235653" class="otherAssociateLeads" style="display:none;">
<div class="clr pdt8"></div>
</div>
</div>
<div class="rf lmsSearchControls">
<div class="lmsCredits">
<span class=" numCredits">1.00</span>
<span>Credit(s)</span>
</div>
<div class="lmsLookout">
<i class="lmsEye lmsIcons"></i>
<span id="viewTime">0 Time(s)</span>
</div>
<div>
<input type="button" class="boxOpener btn blue b" style="width: 150px;font-size: 14px;" value="View Contact">
</div>
</div>
<div class="lmsTplConfirm clr confirmBox" style="background-color: rgba(134, 134, 134, 0.05);display: none;">
<div class="lmsTplConfirmQues">
<div class="f13 grey">
You cannot view this lead's contact details.
</div>
</div>
<div class="lmsTplConfirmAns clearAfter" style="display: none">
<div class=" clearfix" style="display:block">
<div class="clr f14 lf grey"> Some error has occurred. Please refresh your search and try again. </div>
</div>
</div>
</div>
</div>
</div>

To click the View Contact button for Arjun Singh you can use the following xpath :
"//div[#class='lf lmsIndName']//following::input[#class='boxOpener btn blue b']"

Selenium: unable to click on class and image

I'm using Selenium web driver and trying to click on search image and its unable to click on this. I'm not sure what is going wrong. I have tried
xpath option
driver.findElement(By.xpath("//form/div/div/div/div/div[2]/table/tbody/tr/td[2][#class='icon-button combo-button']")).click();
Also tried for image
driver.findElement(By.xpath("//form/div/div/div/div/div[2]/table/tbody/tr/td[2]/img[contains(#src,'iconActionSearch.png')]")).click();
I have tried exactly the same from Selenium IDE
driver.findElement(By.xpath("//div[#id='divToolbar']/div[2]/table/tbody/tr/td[2]/img")).click();
this is where above code is suppose to act
<td class="icon-button combo-button" title="Search">
<img src="../common/images/iconActionSearch.png">
this is html snippet i have
<!DOCTYPE html>
<html>
<head>
<body class="navigator" onbeforeunload="closeAllChildWindows()" onload="initializeSlideIns()">
<div class="mmenu" style="display: none;">
<div class="mmenu" style="display: none;">
<div class="mmenu" style="display: none;">
<div class="mmenu" style="display: none;">
<div class="mmenu" style="display: none;">
<div class="mmenu" style="display: none;">
<div class="mmenu" style="display: none;">
<div class="mmenu" style="display: none;">
<div class="mmenu" style="display: none;">
<div class="mmenu" style="display: none;">
<div class="mmenu" style="display: none;">
<div class="mmenu" style="display: none;">
<div class="mmenu" style="display: none;">
<div class="mmenu" style="display: none;">
<div class="mmenu" style="display: none;">
<form name="navigatorForm">
<div id="pageHeadDiv">
<div class="toolbars">
<div class="toolbar-container">
<div id="divToolbar" class="toolbar-frame">
<div class="toolbar">
<div class="toolbar functions">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="icon-button" nowrap="" itemid="emx567127522162.935" title="Home">
<td class="icon-button combo-button" title="Search">
<img src="../common/images/iconActionSearch.png">
</td>
<td class="menu-arrow" title="Search">
<td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="breadcrumbs">
<script src="./scripts/emxBreadcrumbs.js" type="text/javascript">
<script src="./scripts/emxQuery.js" type="text/javascript">
<script type="text/javascript">
<div id="pageContentDiv" style="top: 62px;">
<div id="layerOverlay" style="display: none;"></div>
<div id="panelSlideIn" class="dialog viewer" style="top: 62px; display: none;">
<div id="windowshadeMask" style="z-index: 50; display: none;">
</form>
<div id="checkoutdiv">
</body>
</html>

try using css selectors alternative:
String cssSelector="td[class='icon-button combo-button']>img"
driver.findElement(By.cssSelector(cssSelector)).click();
a piece of advice: use firebug, firefox extension to verify you located element properly

Just as a different solution to eugene (which, by the way, is a better way of doing it since the CSS selector will be faster), if you must use XPath:
//td[#class='icon-button combo-button']/img
Your original XPath solutions will never work, they are very confined to specific positions. You put in an extra div somewhere and your entire XPath will fall over. So go for something that's a little less brittle.