diff --git a/wormhole-connect/src/components/AlertBanner.tsx b/wormhole-connect/src/components/AlertBanner.tsx
index a3c26f283..63e2c13a1 100644
--- a/wormhole-connect/src/components/AlertBanner.tsx
+++ b/wormhole-connect/src/components/AlertBanner.tsx
@@ -29,6 +29,7 @@ type Props = {
   warning?: boolean;
   error?: boolean;
   margin?: string;
+  testId?: string;
 };
 
 function AlertBanner(props: Props) {
@@ -43,6 +44,7 @@ function AlertBanner(props: Props) {
           !!props.error && classes.error,
         ])}
         style={{ margin: props.margin || 0 }}
+        data-testid={props.testId}
       >
         <AlertIcon />
         {props.content}
diff --git a/wormhole-connect/src/components/Button.tsx b/wormhole-connect/src/components/Button.tsx
index 9f8370598..fe30bef6f 100644
--- a/wormhole-connect/src/components/Button.tsx
+++ b/wormhole-connect/src/components/Button.tsx
@@ -40,6 +40,7 @@ type Props = {
   disabled?: boolean;
   children: React.ReactNode;
   onClick?: MouseEventHandler<HTMLDivElement>;
+  testId?: string;
 };
 
 function Button(props: Props) {
@@ -59,6 +60,7 @@ function Button(props: Props) {
         !!props.disabled && classes.disabled,
       ])}
       onClick={click}
+      data-testid={props.testId}
     >
       {props.children}
     </div>
diff --git a/wormhole-connect/src/components/ConnectWallet.tsx b/wormhole-connect/src/components/ConnectWallet.tsx
index 0931fdf71..37234c29f 100644
--- a/wormhole-connect/src/components/ConnectWallet.tsx
+++ b/wormhole-connect/src/components/ConnectWallet.tsx
@@ -16,6 +16,7 @@ import WalletIcons from 'icons/WalletIcons';
 import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
 import Popover from '@mui/material/Popover';
 import config from 'config';
+import { TransferSide } from 'config/types';
 import { ExplorerConfig } from 'config/types';
 
 type StyleProps = { disabled?: boolean };
@@ -57,6 +58,7 @@ const useStyles = makeStyles<StyleProps>()((theme: any, { disabled }) => ({
 }));
 
 type Props = {
+  side: TransferSide;
   type: TransferWallet;
   disabled?: boolean;
 };
@@ -181,7 +183,11 @@ function ConnectWallet(props: Props) {
     );
   } else {
     const button = (
-      <div className={classes.connectWallet} onClick={() => connect()}>
+      <div
+        className={classes.connectWallet}
+        onClick={() => connect()}
+        data-testid={`${props.side}-section-connect-wallet-button`}
+      >
         <WalletIcon />
         <div>{mobile ? 'Connect' : 'Connect wallet'}</div>
       </div>
diff --git a/wormhole-connect/src/components/Header.tsx b/wormhole-connect/src/components/Header.tsx
index 3003a5f8a..e8c846ef8 100644
--- a/wormhole-connect/src/components/Header.tsx
+++ b/wormhole-connect/src/components/Header.tsx
@@ -22,6 +22,7 @@ type Props = {
   text: string;
   align?: Alignment;
   size?: number;
+  testId?: string;
 };
 
 function Header(props: Props) {
@@ -30,7 +31,11 @@ function Header(props: Props) {
     fontSize: props.size || 42,
   };
   const { classes } = useStyles(styleProps);
-  return <div className={classes.title}>{props.text}</div>;
+  return (
+    <div className={classes.title} data-test-id={props.testId}>
+      {props.text}
+    </div>
+  );
 }
 
 export default Header;
diff --git a/wormhole-connect/src/components/InputTransparent.tsx b/wormhole-connect/src/components/InputTransparent.tsx
index cacc02b03..1354b001f 100644
--- a/wormhole-connect/src/components/InputTransparent.tsx
+++ b/wormhole-connect/src/components/InputTransparent.tsx
@@ -39,6 +39,7 @@ type Props = {
   onEnter?: React.KeyboardEventHandler;
   disabled?: boolean;
   value?: string | number;
+  testId?: string;
 };
 
 const NUMBER_FORMAT_REGEX = /^\d*\.?\d*$/;
@@ -76,6 +77,7 @@ function InputTransparent(props: Props) {
       onKeyDown={handleKeyDown}
       readOnly={props.disabled}
       value={props.value}
+      data-testid={props.testId}
     />
   );
 }
diff --git a/wormhole-connect/src/components/PageHeader.tsx b/wormhole-connect/src/components/PageHeader.tsx
index 38c17a6b1..17873fb17 100644
--- a/wormhole-connect/src/components/PageHeader.tsx
+++ b/wormhole-connect/src/components/PageHeader.tsx
@@ -52,6 +52,7 @@ type PageHeaderProps = {
   description?: string;
   back?: boolean;
   showHamburgerMenu?: boolean;
+  testId?: string;
 };
 
 function PageHeader({
@@ -60,6 +61,7 @@ function PageHeader({
   align = 'left',
   description,
   showHamburgerMenu = true,
+  testId,
 }: PageHeaderProps) {
   const { classes } = useStyles({ showHamburgerMenu, align });
   const dispatch = useDispatch();
@@ -78,7 +80,7 @@ function PageHeader({
               onClick={goBack}
             />
           )}
-          <Header text={title} align={align} />
+          <Header text={title} align={align} testId={testId} />
         </div>
         {showHamburgerMenu ? <MenuFull /> : null}
       </div>
diff --git a/wormhole-connect/src/config/types.ts b/wormhole-connect/src/config/types.ts
index f5d4126c6..13cca7bf2 100644
--- a/wormhole-connect/src/config/types.ts
+++ b/wormhole-connect/src/config/types.ts
@@ -55,6 +55,9 @@ export enum Route {
   wstETHBridge = 'wstETHBridge',
 }
 
+// Used in bridging components
+export type TransferSide = 'source' | 'destination';
+
 export type SupportedRoutes = keyof typeof Route;
 
 export type Network = 'mainnet' | 'testnet' | 'devnet';
diff --git a/wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx b/wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx
index 4736f8ce3..77343fa39 100644
--- a/wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx
+++ b/wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx
@@ -10,12 +10,14 @@ import Input from './Input';
 import config from 'config';
 import Price from 'components/Price';
 import { getTokenPrice, getUSDFormat } from 'utils';
+import { TransferSide } from 'config/types';
 
 type Props = {
   handleAmountChange: (value: number | string) => void;
   value: string;
   disabled?: boolean;
   label?: string;
+  side: TransferSide;
 };
 function AmountInput(props: Props) {
   const amountEl = useRef(null);
@@ -77,6 +79,7 @@ function AmountInput(props: Props) {
             onChange={handleAmountChange}
             disabled={isTransactionInProgress || props.disabled}
             value={props.value}
+            testId={props.side + '-section-amount-input'}
           />
           {price && <Price>{price}</Price>}
         </>
diff --git a/wormhole-connect/src/views/Bridge/Inputs/From.tsx b/wormhole-connect/src/views/Bridge/Inputs/From.tsx
index 93d685b33..e8ea93672 100644
--- a/wormhole-connect/src/views/Bridge/Inputs/From.tsx
+++ b/wormhole-connect/src/views/Bridge/Inputs/From.tsx
@@ -81,6 +81,7 @@ function FromInputs() {
   const tokenInput = (
     <Select
       label="Asset"
+      testId="source-section-select-asset-button"
       selected={selectedToken}
       error={!!(showErrors && validations.token)}
       onClick={() => setShowTokensModal(true)}
@@ -148,7 +149,11 @@ function FromInputs() {
     computeReceiveAmount(amount);
   }, [route, amount, computeReceiveAmount]);
   const amountInput = (
-    <AmountInput handleAmountChange={handleAmountChange} value={amount} />
+    <AmountInput
+      handleAmountChange={handleAmountChange}
+      value={amount}
+      side="source"
+    />
   );
 
   const handleExtraNetwork = (
@@ -165,7 +170,7 @@ function FromInputs() {
   return (
     <>
       <Inputs
-        title="From"
+        side="source"
         wallet={TransferWallet.SENDING}
         walletValidations={[validations.sendingWallet]}
         walletError={wallet.error}
@@ -193,7 +198,9 @@ function FromInputs() {
       <ChainsModal
         open={showChainsModal}
         title="Sending from"
-        chains={config.chainsArr.filter((c) => c.key !== toChain && !c.disabledAsSource)}
+        chains={config.chainsArr.filter(
+          (c) => c.key !== toChain && !c.disabledAsSource,
+        )}
         onSelect={selectChain}
         onClose={() => setShowChainsModal(false)}
         onMoreNetworkSelect={(href, chainName, target) =>
diff --git a/wormhole-connect/src/views/Bridge/Inputs/Inputs.tsx b/wormhole-connect/src/views/Bridge/Inputs/Inputs.tsx
index 6609f0a19..689badabb 100644
--- a/wormhole-connect/src/views/Bridge/Inputs/Inputs.tsx
+++ b/wormhole-connect/src/views/Bridge/Inputs/Inputs.tsx
@@ -6,6 +6,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { ChainName } from '@wormhole-foundation/wormhole-connect-sdk';
 
 import config from 'config';
+import { TransferSide } from 'config/types';
 import { RootState } from 'store';
 import { ValidationErr } from 'store/transferInput';
 import { NO_INPUT } from 'utils/style';
@@ -107,7 +108,7 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 type Props = {
-  title: string;
+  side: TransferSide;
   wallet: TransferWallet;
   walletError: string;
   walletValidations: string[];
@@ -145,13 +146,21 @@ function Inputs(props: Props) {
     return '';
   }, [props.tokenPrice, props.balance]);
 
+  const title = {
+    source: 'From',
+    destination: 'To',
+  }[props.side];
+
+  const chainTestId = props.side + '-section-select-network-button';
+
   return (
     <div className={classes.container}>
       <div className={classes.errorContainer}>
         <div className={classes.header}>
-          <div className={classes.headerTitle}>{props.title}</div>
+          <div className={classes.headerTitle}>{title}</div>
           {/* connect wallet button */}
           <ConnectWallet
+            side={props.side}
             type={props.wallet}
             disabled={isTransactionInProgress || !selectedChain}
           />
@@ -178,7 +187,7 @@ function Inputs(props: Props) {
           <div className={classes.content}>
             {/* chain tile */}
             {!mobile && (
-              <div className={classes.chain}>
+              <div className={classes.chain} data-testid={chainTestId}>
                 <ChainTile
                   chain={chainConfig}
                   error={!!(showErrors && props.chainValidation)}
@@ -212,7 +221,10 @@ function Inputs(props: Props) {
                 <div className={classes.amount}>{props.amountInput}</div>
 
                 {/* balance */}
-                <div className={classes.balance}>
+                <div
+                  className={classes.balance}
+                  data-testid={`${props.side}-section-balance-text`}
+                >
                   <Input label="Balance" disabled>
                     <div>
                       {props.balance ? (
diff --git a/wormhole-connect/src/views/Bridge/Inputs/Select.tsx b/wormhole-connect/src/views/Bridge/Inputs/Select.tsx
index 3429031d5..f50c03095 100644
--- a/wormhole-connect/src/views/Bridge/Inputs/Select.tsx
+++ b/wormhole-connect/src/views/Bridge/Inputs/Select.tsx
@@ -29,6 +29,7 @@ type Selected = {
 
 type Props = {
   label: string;
+  testId?: string;
   selected: Selected | undefined;
   error?: boolean;
   editable?: boolean;
@@ -54,7 +55,7 @@ function Select(props: Props) {
       onClick={handleClick}
     >
       {selected ? (
-        <div className={classes.select}>
+        <div className={classes.select} data-testid={props.testId}>
           <TokenIcon icon={selected.icon} height={24} />
           {selected.text}
           {selected.secondaryText && (
@@ -66,7 +67,7 @@ function Select(props: Props) {
       ) : props.disabled ? (
         NO_INPUT
       ) : (
-        <div className={classes.select}>
+        <div className={classes.select} data-testid={props.testId}>
           <TokenIcon height={24} />
           Select
         </div>
diff --git a/wormhole-connect/src/views/Bridge/Inputs/To.tsx b/wormhole-connect/src/views/Bridge/Inputs/To.tsx
index dbc1f7e02..018d64edb 100644
--- a/wormhole-connect/src/views/Bridge/Inputs/To.tsx
+++ b/wormhole-connect/src/views/Bridge/Inputs/To.tsx
@@ -74,6 +74,7 @@ function ToInputs() {
   const tokenInput = (
     <Select
       label="Asset"
+      testId="destination-section-select-asset-button"
       selected={selectedToken}
       error={!!(showErrors && validations.token)}
       onClick={() => setShowTokensModal(true)}
@@ -122,6 +123,7 @@ function ToInputs() {
       value={receiveAmount.data || ''}
       disabled
       label={label}
+      side="destination"
     />
   );
 
@@ -139,7 +141,7 @@ function ToInputs() {
   return (
     <>
       <Inputs
-        title="To"
+        side="destination"
         wallet={TransferWallet.RECEIVING}
         walletValidations={[validations.receivingWallet]}
         walletError={receiving.error}
@@ -169,7 +171,9 @@ function ToInputs() {
       <ChainsModal
         open={showChainsModal}
         title="Sending to"
-        chains={config.chainsArr.filter((c) => c.key !== fromChain && !c.disabledAsDestination)}
+        chains={config.chainsArr.filter(
+          (c) => c.key !== fromChain && !c.disabledAsDestination,
+        )}
         onSelect={selectChain}
         onClose={() => setShowChainsModal(false)}
         onMoreNetworkSelect={(href, chainName, target) =>
diff --git a/wormhole-connect/src/views/Bridge/RouteOptions.tsx b/wormhole-connect/src/views/Bridge/RouteOptions.tsx
index 70c51fff9..a22999231 100644
--- a/wormhole-connect/src/views/Bridge/RouteOptions.tsx
+++ b/wormhole-connect/src/views/Bridge/RouteOptions.tsx
@@ -291,6 +291,7 @@ function RouteOption(props: { route: RouteData; disabled: boolean }) {
           className={`${classes.route} ${
             props.disabled ? classes.disabled : ''
           }`}
+          data-testid={`route-option-${props.route.route}`}
         >
           <div className={classes.routeLeft}>
             <div className={classes.routeTitle}>
diff --git a/wormhole-connect/src/views/Bridge/Send.tsx b/wormhole-connect/src/views/Bridge/Send.tsx
index d1b6ed2d3..62e98b469 100644
--- a/wormhole-connect/src/views/Bridge/Send.tsx
+++ b/wormhole-connect/src/views/Bridge/Send.tsx
@@ -245,6 +245,7 @@ function Send(props: { valid: boolean }) {
         content={sendError}
         error
         margin="0 0 16px 0"
+        testId="send-error-message"
       />
       {props.valid && !isConnected ? (
         <Button disabled elevated>
@@ -266,6 +267,7 @@ function Send(props: { valid: boolean }) {
             onClick={send}
             action={props.valid}
             disabled={disabled}
+            testId="approve-button"
             elevated
           >
             {isTransactionInProgress ? (
diff --git a/wormhole-connect/src/views/Redeem/AddToWallet.tsx b/wormhole-connect/src/views/Redeem/AddToWallet.tsx
index ad9ca6495..807a2abd8 100644
--- a/wormhole-connect/src/views/Redeem/AddToWallet.tsx
+++ b/wormhole-connect/src/views/Redeem/AddToWallet.tsx
@@ -110,6 +110,7 @@ function AddToSolanaWallet({ token, address }: AddTokenProps) {
         chain={'solana'}
         type={'address'}
         address={address}
+        side="destination"
       />
     </Typography>
   );
@@ -130,6 +131,7 @@ function AddToSuiWallet({ token, address }: AddTokenProps) {
         chain={'sui'}
         type={'object'}
         object={address}
+        side="destination"
       />
     </Typography>
   );
@@ -150,6 +152,7 @@ function AddToAptosWallet({ token, address }: AddTokenProps) {
         chain={'aptos'}
         type={'address'}
         address={tokenAccount}
+        side="destination"
       />
     </Typography>
   );
diff --git a/wormhole-connect/src/views/Redeem/BridgeComplete.tsx b/wormhole-connect/src/views/Redeem/BridgeComplete.tsx
index 3424fc077..d79e61137 100644
--- a/wormhole-connect/src/views/Redeem/BridgeComplete.tsx
+++ b/wormhole-connect/src/views/Redeem/BridgeComplete.tsx
@@ -30,7 +30,11 @@ function BridgeComplete() {
   };
 
   let containerBg: string | undefined = undefined;
-  let component: React.JSX.Element = <div>The bridge is now complete.</div>;
+  let component: React.JSX.Element = (
+    <div data-testid="transaction-complete-message">
+      The bridge is now complete.
+    </div>
+  );
   if (
     isPorticoTransferDestInfo(transferDestInfo) &&
     transferDestInfo.destTxInfo.swapFailed
diff --git a/wormhole-connect/src/views/Redeem/ExplorerLink.tsx b/wormhole-connect/src/views/Redeem/ExplorerLink.tsx
index a0ea2f82a..05412beaf 100644
--- a/wormhole-connect/src/views/Redeem/ExplorerLink.tsx
+++ b/wormhole-connect/src/views/Redeem/ExplorerLink.tsx
@@ -4,6 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import { LINK } from 'utils/style';
 import config from 'config';
 import LaunchIcon from '@mui/icons-material/Launch';
+import { TransferSide } from 'config/types';
 
 const useStyles = makeStyles()((theme) => ({
   link: {
@@ -14,6 +15,7 @@ const useStyles = makeStyles()((theme) => ({
 
 type ExplorerLinkProps = {
   chain: ChainName;
+  side: TransferSide;
   styles?: React.CSSProperties;
 } & (
   | { type: 'tx'; txHash: string }
@@ -76,6 +78,7 @@ function ExplorerLink(props: ExplorerLinkProps) {
       href={explorerLink}
       target="_blank"
       rel="noreferrer"
+      data-testid={`${props.side}-section-explorer-link`}
     >
       <div>{chainConfig.explorerName}</div>
       <LaunchIcon />
diff --git a/wormhole-connect/src/views/Redeem/Header.tsx b/wormhole-connect/src/views/Redeem/Header.tsx
index 890722258..4e5c8494c 100644
--- a/wormhole-connect/src/views/Redeem/Header.tsx
+++ b/wormhole-connect/src/views/Redeem/Header.tsx
@@ -9,6 +9,7 @@ import WalletIcon from 'icons/Wallet';
 import TokenIcon from 'icons/TokenIcons';
 import CircularProgress from '@mui/material/CircularProgress';
 import ExplorerLink from './ExplorerLink';
+import { TransferSide } from 'config/types';
 
 const useStyles = makeStyles()((theme) => ({
   header: {
@@ -39,6 +40,7 @@ type Props = {
   txHash?: string;
   loading?: boolean;
   text?: string;
+  side: TransferSide;
 };
 
 function Header(props: Props) {
@@ -54,10 +56,17 @@ function Header(props: Props) {
       {props.loading ? (
         <CircularProgress size={26} />
       ) : props.text ? (
-        <div>{props.text}</div>
+        <div data-testid={`${props.side}-section-scan-link-error-message`}>
+          {props.text}
+        </div>
       ) : (
         props.txHash && (
-          <ExplorerLink chain={props.chain} type={'tx'} txHash={props.txHash} />
+          <ExplorerLink
+            chain={props.chain}
+            type={'tx'}
+            txHash={props.txHash}
+            side={props.side}
+          />
         )
       )}
     </div>
diff --git a/wormhole-connect/src/views/Redeem/Redeem.tsx b/wormhole-connect/src/views/Redeem/Redeem.tsx
index 889911eab..0539053ec 100644
--- a/wormhole-connect/src/views/Redeem/Redeem.tsx
+++ b/wormhole-connect/src/views/Redeem/Redeem.tsx
@@ -154,6 +154,7 @@ function Redeem({
         title="Bridge"
         back
         showHamburgerMenu={config.showHamburgerMenu}
+        testId="redeem-screen-header"
       />
 
       <ChainsTag />
diff --git a/wormhole-connect/src/views/Redeem/SendFrom.tsx b/wormhole-connect/src/views/Redeem/SendFrom.tsx
index f72aad073..b93432886 100644
--- a/wormhole-connect/src/views/Redeem/SendFrom.tsx
+++ b/wormhole-connect/src/views/Redeem/SendFrom.tsx
@@ -39,6 +39,7 @@ function SendFrom() {
           chain={txData!.fromChain}
           address={txData!.sender}
           txHash={txData!.sendTx}
+          side="source"
         />
         <RenderRows rows={rows} />
       </InputContainer>
diff --git a/wormhole-connect/src/views/Redeem/SendTo.tsx b/wormhole-connect/src/views/Redeem/SendTo.tsx
index 1cf77e8e1..bf3c6eced 100644
--- a/wormhole-connect/src/views/Redeem/SendTo.tsx
+++ b/wormhole-connect/src/views/Redeem/SendTo.tsx
@@ -262,6 +262,7 @@ function SendTo() {
           loading={loading}
           txHash={redeemTx}
           text={manualClaimText}
+          side="destination"
         />
         <>
           {showSwitchToManualClaim && (
@@ -292,6 +293,7 @@ function SendTo() {
             content={claimError}
             error
             margin="0 0 12px 0"
+            testId="claim-error-message"
           />
           {wallet.address ? (
             isConnected ? (