How can i test a portal with forms in a iFrame

Grafana k6
1

i am doing Prove Of Concept.
The portal that i am working on , makes a heavy use of iFrame.

We have a JMeter performance test framework. The JMeter is not iFramae friendly.
So, i am attempting to resolve the issue using k6.
How can i test such a portal with k6

The Calling page code looks like this

<html lang="en">
  <!-- $HTMLId: templates/v2/v1-wrapper.ftl $ -->
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
  <div id="sb-site">
    <h1 class="m-0">Agent Dashboard</h1>
  </div>
  <div id="page-content-wrapper">
    <iframe class="embed-responsive-item" name="legacy_ad" id="legacy_ad"
    src="otp-cxinfo.do?CSRF_TOKEN=1669905616279-98edfd4720587b18b5f31cc3413569038dfb49f6ba286340c7505832a5e4a110&amp;newBean=true"></iframe>
  </div>
  </body>
</html>

The document in an iFrame looks like this

#document 
<!--?xml version="1.0" encoding="UTF-8"?-->  <head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>Account Information: Agent Dashboard: </title>
</head>
<!-- $HTMLId: templates/otp/otp-cxinfo.ftl $ --> 
<!-- files for legacy AD in iframe -->
<link rel="stylesheet" type="text/css" href="v2/assets/monarch/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="v2/assets/monarch/css/monarch.css" />
<link rel="stylesheet" type="text/css" href="v2/assets/monarch/css/monarch-theme.css" />
<link rel="stylesheet" type="text/css" href="v2/assets/monarch/css/fonts/fontawesome/fontawesome.css" />
<link rel="stylesheet" type="text/css" href="v2/assets/monarch/css/fonts/linecons/linecons.css" />
<link rel="stylesheet" type="text/css" href="v2/assets/monarch/css/style-v2.css" />
<link rel="stylesheet" type="text/css" href="v2/assets/monarch/css/style-iframe.css" />
<link rel="stylesheet" type="text/css" href="v2/assets/monarch/css/fonts/fontawesome/fontawesome.css" />
<script language="JavaScript1.2" src="js/calendar.js" type="text/javascript"></script> 
<script language="JavaScript1.2" src="js/calendar-setup.js" type="text/javascript"></script> 
<script language="JavaScript1.2" src="lang/calendar-en.js" type="text/javascript"></script> 
<script language="JavaScript1.2" src="js/jquery.mask.min.js" type="text/javascript"></script> 
<script src="js/spin-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css"></style>
<h1 type="hidden" class="sr-only">Make A Payment Page</h1>
<div id="header"></div>
<div id="outer_wrapper">
<div id="wrapper">
  <div id="container">
	<div id="content">
	  <div id="left"></div>
	  <div id="main">
		<!-- Here comes the payload -->
		<form name="ActionForm" method="post"
		action="otp-payinfo.do?CSRF_TOKEN=1669905616465-324a0426c0f1a37d51774a423ecfc1e86d2494b8244f49e036a150df6bedc23c"
		autocomplete="off">
		  <input type="hidden" name="CSRF_TOKEN"
		  value="1669905616465-324a0426c0f1a37d51774a423ecfc1e86d2494b8244f49e036a150df6bedc23c" />
		  <div id="payload-form-id">
			<table width="640" border="0" class="simple-form" role="presentation">
			  <colgroup align="left" valign="top" width="175"></colgroup>
			  <colgroup align="left" valign="top"></colgroup>
			  <tbody>
				<tr>
				  <td colspan="2" class="body-title">
					<!-- Step Progress Indicator table -->
					<table width="640" border="0" cellpadding="0" cellspacing="0" class="progress-table">
					  <tbody>
						<tr>
						  <td class="step-indicator-cxi">
							<table width="186" border="0" cellspacing="0" cellpadding="0">
							  <tbody>
								<tr>
								  <td width="21"></td>
								  <td width="160" class="stepLabel_a">Customer Information</td>
								</tr>
							  </tbody>
							</table>
						  </td>
						  <td class="step-indicator-payi">
							<table width="186" border="0" cellspacing="0" cellpadding="0">
							  <tbody>
								<tr>
								  <td width="21"></td>
								  <td width="160" class="stepLabel_c">Account &amp; Payment Information</td>
								</tr>
							  </tbody>
							</table>
						  </td>
						  <td class="step-indicator-pmi">
							<table width="186" border="0" cellspacing="0" cellpadding="0">
							  <tbody>
								<tr>
								  <td width="21"></td>
								  <td width="160" class="stepLabel_c">Confirm Payment</td>
								</tr>
							  </tbody>
							</table>
						  </td>
						</tr>
					  </tbody>
					</table>
					<!-- end of Step Progress Indicator table -->
				  </td>
				</tr>
				<!-- hideDayPhone = false -->
				<tr>
				  <td colspan="2" class="body-title">
					<br />
					<table width="100%" border="0">
					  <tbody>
						<tr>
						  <td colspan="2" id="contact-info" class="highlight_summary_row">
							<table width="75%" cellpadding="2" cellspacing="2">
							  <tbody>
								<tr>
								  <td colspan="2" class="form-style-text">Please enter all of the information below and click 
								  <span class="form-style-text-bold">Continue</span>.</td>
								</tr>
								<tr>
								  <td class="highlight_summary_row">Contact Information</td>
								</tr>
							  </tbody>
							</table>
						  </td>
						</tr>
					  </tbody>
					</table>
				  </td>
				</tr>
				<tr class="">
				  <td valign="top" width="30%" class="form-style-label v2-col-label">
				  <span>
					<sup>*</sup>
				  </span> 
				  <label class="form-style-label" for="customer.firstName">First Name:</label> </td>
				  <td class="form-style-label v2-col-input">
					<input type="text" name="customer.firstName" id="customer.firstName" value="" size="40" maxlength="60"
					required="" />
				  </td>
				</tr>
				<tr class="">
				  <td valign="top" width="30%" class="form-style-label v2-col-label">
				  <label class="form-style-label" for="customer.middleName">Middle Name:</label> </td>
				  <td class="form-style-label v2-col-input">
					<input type="text" name="customer.middleName" id="customer.middleName" value="" size="40" maxlength="60" />
				  </td>
				</tr>
				<tr class="">
				  <td valign="top" width="30%" class="form-style-label v2-col-label">
				  <span>
					<sup>*</sup>
				  </span> 
				  <label class="form-style-label" for="customer.lastName">Last Name:</label> </td>
				  <td class="form-style-label v2-col-input">
					<input type="text" name="customer.lastName" id="customer.lastName" value="" size="40" maxlength="60"
					required="" />
				  </td>
				</tr>
				<tr>
				  <td colspan="2"> </td>
				</tr>
				<tr class="">
				  <td valign="top" width="30%" class="form-style-label v2-col-label">
				  <span>
					<sup>*</sup>
				  </span> 
				  <label class="form-style-label" for="customer.dayPhone.npa">Daytime Phone Number:</label> </td>
				  <td class="form-style-label v2-col-input">
					<table>
					  <tbody>
						<tr>
						  <td>(</td>
						  <td>
							<label>
							  <input type="text" class="form-control" style="width:49px;" name="customer.dayPhone.npa"
							  id="customer.dayPhone.npa" value="" size="3" maxlength="3" onfocus="this.select();"
							  onkeypress="return(checkNumber(this,event))" onkeyup="autoTab(this,3);" required="" />
							</label>
						  </td>
						  <td>) </td>
						  <td>
							<label>
							  <input type="text" class="form-control" style="width:49px;" name="customer.dayPhone.nxx" value=""
							  size="3" maxlength="3" onfocus="this.select();" onkeypress="return(checkNumber(this,event))"
							  onkeyup="autoTab(this,3);" required="" />
							</label>
						  </td>
						  <td> - </td>
						  <td>
							<label>
							  <input type="text" class="form-control" style="width:58px;" name="customer.dayPhone.did" value=""
							  size="4" maxlength="4" onfocus="this.select();" onkeypress="return(checkNumber(this,event))"
							  onkeyup="autoTab(this,4);" required="" />
							</label>
						  </td>
						  <td> ext. </td>
						  <td>
							<label>
							  <input type="text" class="form-control" style="width:64px;" name="customer.dayPhone.ext" value=""
							  size="6" maxlength="6" onfocus="this.select();" onkeypress="return(checkNumber(this,event))"
							  onkeyup="autoTab(this,6);" />
							</label>
						  </td>
						</tr>
					  </tbody>
					</table>
				  </td>
				</tr>
				<tr>
				  <td colspan="2"> </td>
				</tr>
				<tr class="">
				  <td valign="top" width="30%" class="form-style-label v2-col-label">
				  <label class="form-style-label" for="customer.email">Email Address:</label> </td>
				  <td class="form-style-label v2-col-input">
					<input type="text" name="customer.email" id="customer.email" value="" size="40" maxlength="256" />
				  </td>
				</tr>
				<tr class="">
				  <td valign="top" width="30%" class="form-style-label v2-col-label"> </td>
				  <td class="form-style-label v2-col-input">
					<table width="280" border="0" class="simple-form" role="presentation">
					  <colgroup align="left" valign="top" width="175"></colgroup>
					  <colgroup align="left" valign="top"></colgroup>
					  <tbody>
						<tr>
						  <td colspan="2" class="SmallFont">
							<font size="1">Please provide an email address so we may send you a confirmation of payment. Your
							e-mail address will not be used for any other purpose.</font>
						  </td>
						</tr>
					  </tbody>
					</table>
				  </td>
				</tr>
				<tr class="">
				  <td valign="top" width="30%" class="form-style-label v2-col-label">
				  <label class="form-style-label" for="customer.email2">Retype Email Address:</label> </td>
				  <td class="form-style-label v2-col-input">
					<input type="text" name="customer.email2" id="customer.email2" value="" size="40" maxlength="256" />
				  </td>
				</tr>
				<tr>
				  <td colspan="2"> </td>
				</tr>
				<tr>
				  <td width="30%"> </td>
				  <td align="left">
					<table width="80%" class="" cellpadding="5">
					  <colgroup>
						<col align="left" />
						<col align="left" />
						<col width="100%" />
					  </colgroup>
					  <tbody>
						<tr>
						  <td class="action-col-input">
							<button type="button" class="actionbutton" name="submitBtn" onclick="doSubmit();">Continue</button>
						  </td>
						  <td class="action-col-input">
							<button type="button" class="actionbutton" name="cancelBtn" onclick="doCancel();">Cancel</button>
						  </td>
						  <td> </td>
						</tr>
					  </tbody>
					</table>
				  </td>
				</tr>
			  </tbody>
			</table>
		  </div>
		</form>
		<!-- End of payload -->
	  </div>
	</div>
  </div>
  <div class="clearing"> </div>
</div>
</div></body>
</html>
3

Hi @HardBoiledEg,

I’m going to assume the browser also makes a request to retrieve whatever is in the iframe - the src attribute is relative in this case so I can’t tell from this snippet what the full URL is, but you would need to send this additional HTTP request in order to retrieve what presumably then is the subsequent HTML you see there.

I would recommend using the Browser Recorder to capture the requests and convert that to a k6 script. Alternatives would be to inspect the traffic in Chrome’s DevTools → Network tab, or using a web proxy like Fiddler.