Add contract verification e2e -1

apps/contract-verification/src/app/components/NavMenu.tsx

@@ -10,6 +10,7 @@ interface NavItemProps {
 const NavItem: React.FC<NavItemProps> = ({ to, icon, title }) => {
   return (
     <NavLink
+      data-id={`${title}Tab`}
       to={to}
       className={({ isActive }) => 'text-decoration-none d-flex px-1 py-1 flex-column justify-content-center small ' + (isActive ? "bg-light border-top border-left border-right" : "border-0 bg-transparent")}
     >

apps/contract-verification/src/app/components/SearchableChainDropdown.tsx

@@ -90,10 +90,10 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
       {' '}
       {/* Add ref here */}
       <label htmlFor={id}>{label}</label>
-      <input type="text" value={searchTerm} onChange={handleInputChange} onClick={openDropdown} placeholder="Select a chain" className="form-control" />
+      <input type="text" value={searchTerm} onChange={handleInputChange} onClick={openDropdown} data-id="chainDropdownbox" placeholder="Select a chain" className="form-control" />
       <ul className="dropdown-menu show w-100 bg-light" style={{ maxHeight: '400px', overflowY: 'auto', display: isOpen ? 'initial' : 'none' }}>
         {filteredOptions.map((chain) => (
-          <li key={chain.chainId} onClick={() => handleOptionClick(chain)} className={`dropdown-item text-dark ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`} style={{ cursor: 'pointer', whiteSpace: 'normal' }}>
+          <li key={chain.chainId} onClick={() => handleOptionClick(chain)} data-id={chain.chainId} className={`dropdown-item text-dark ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`} style={{ cursor: 'pointer', whiteSpace: 'normal' }}>
             {getChainDescriptor(chain)}
           </li>
         ))}

apps/contract-verification/src/app/layouts/Default.tsx

@@ -13,7 +13,7 @@ export const DefaultLayout = ({ children, title, description }: PropsWithChildre
     <div className="d-flex flex-column h-100">
       <NavMenu />
       <div className="py-4 px-3 flex-grow-1 bg-light" style={{ overflowY: 'auto' }}>
-        <div>
+        <div data-id={`${title}Description`}>
           <p className="text-center" style={{ fontSize: '0.8rem' }}>
             {description}
           </p>

apps/contract-verification/src/app/views/ReceiptsView.tsx

@@ -10,7 +10,7 @@ export const ReceiptsView = () => {
     <div>
       {contracts.length > 0 ? contracts.map((contract, index) => (
         <AccordionReceipt contract={contract} index={index} />
-      )) : <div className="text-center mt-5">No contracts submitted for verification</div>}
+      )) : <div className="text-center mt-5" data-id="noContractsSubmitted">No contracts submitted for verification</div>}
     </div>
   )
 }

apps/remix-ide-e2e/src/tests/contract_verification.test.ts

@@ -0,0 +1,38 @@
+'use strict'
+import { NightwatchBrowser } from 'nightwatch'
+import init from '../helpers/init'
+
+declare global {
+  interface Window { testplugin: { name: string, url: string }; }
+}
+
+const tests = {
+  '@disabled': true,
+  before: function (browser: NightwatchBrowser, done: VoidFunction) {
+    init(browser, done, null)
+  },
+
+  'Should load contract verification plugin #group1': function (browser: NightwatchBrowser) {
+    browser
+      .clickLaunchIcon('pluginManager')
+      .scrollAndClick('[data-id="pluginManagerComponentActivateButtoncontract-verification"]')
+      .clickLaunchIcon('contract-verification')
+      .pause(5000)
+      .frame(0)
+      .waitForElementVisible('*[data-id="VerifyDescription"]')
+  },
+
+  'Should select a chain by searching #group1': function (browser: NightwatchBrowser) {
+    browser
+      .click('[data-id="chainDropdownbox"]')
+      .sendKeys('[data-id="chainDropdownbox"]', 's')
+      .sendKeys('[data-id="chainDropdownbox"]', 'c')
+      .sendKeys('[data-id="chainDropdownbox"]', 'r')
+      .click('[data-id="534351"]')
+      .assert.attributeContains('[data-id="chainDropdownbox"]', 'value', "Scroll Sepolia Testnet (534351)")
+  }
+}
+
+module.exports = {
+  ...tests
+};