duckduckgo · GioSensation · Jul 21, 2023 · Jul 12, 2023 · Jul 12, 2023 · Jul 12, 2023
diff --git a/dist/autofill-debug.js b/dist/autofill-debug.js
diff --git a/dist/autofill.css b/dist/autofill.css
diff --git a/dist/autofill.js b/dist/autofill.js
diff --git a/integration-test/helpers/mocks.js b/integration-test/helpers/mocks.js
@@ -9,6 +9,7 @@ export const constants = {
  'emailAtTopLeft': 'pages/email-at-top-left.html',
  'iframeContainer': 'pages/iframe-container.html',
  'signup': 'pages/signup.html',
+ 'mutatingForm': 'pages/mutating-form.html',
  'login': 'pages/login.html',
  'loginWithPoorForm': 'pages/login-poor-form.html',
  'loginWithText': 'pages/login-with-text.html',

diff --git a/integration-test/helpers/pages.js b/integration-test/helpers/pages.js
@@ -59,6 +59,26 @@
  return new IncontextSignupPage()
 }
 
+export function mutatingFormPage (page) {
+ class MutatingFormPage {
+ async navigate () {
+ await page.goto(constants.pages['mutatingForm'])
+ }
+ async toggleLoginOrSignup () {
+ const toggleBtn = page.locator('#toggle-login-signup')
+ await toggleBtn.click()
+ }
+ passwordFieldShowsKey () {
+ return loginPage(page).passwordFieldShowsKey()
+ }
+ assertPasswordHasNoIcon () {
+ return signupPage(page).assertPasswordHasNoIcon()
+ }
+ }
+
+ return new MutatingFormPage()
+}
+
 /**
  * A wrapper around interactions for `integration-test/pages/signup.html`
  *
@@ -68,6 +88,7 @@
  const decoratedFirstInputSelector = '#email' + constants.fields.email.selectors.identity
  const decoratedSecondInputSelector = '#email-2' + constants.fields.email.selectors.identity
  const emailStyleAttr = () => page.locator('#email').first().getAttribute('style')
+ const passwordStyleAttr = () => page.locator('#password' + constants.fields.password.selectors.credential).getAttribute('style')
 
  class SignupPage {
  /**
@@ -149,7 +170,7 @@
 const [, generatedPassword] = passwordButtonText.split('\n')

 if (!generatedPassword.trim()) {
 throw new Error('unreachable - password must not be empty')
 }

 await passwordBtn.click({ force: true })
@@ -282,7 +303,10 @@
  await expect(input).toHaveValue('')
  }
  async assertEmailHasNoDaxIcon () {
- expect(await emailStyleAttr()).toBeNull()
+ expect(await emailStyleAttr()).toBeFalsy()
+ }
+ async assertPasswordHasNoIcon () {
+ expect(await passwordStyleAttr()).toBeFalsy()
  }
  }
 
@@ -343,16 +367,24 @@
  const emailStyle = await page.locator('#email').getAttribute('style')
  expect(emailStyle).toContain(constants.iconMatchers.dax)
  }
- async emailHasDaxPasswordNoIcon () {
- await this.emailFieldShowsDax()
+ async passwordFieldShowsKey () {
+ // don't make assertions until the element is both found + has a none-empty 'style' attribute
+ await page.waitForFunction(() => Boolean(document.querySelector('#password')?.getAttribute('style')))
+ const emailStyle = await page.locator('#password').getAttribute('style')
+ expect(emailStyle).toContain(constants.iconMatchers.key)
+ }
+ async passwordHasNoIcon () {
  const passwordStyle = await page.locator('#password').getAttribute('style')
  expect(passwordStyle || '').not.toContain('data:image/svg+xml;base64,')
  }
+ async emailHasDaxPasswordNoIcon () {
+ await this.emailFieldShowsDax()
+ await this.passwordHasNoIcon()
+ }
  async onlyPasswordFieldHasIcon () {
  const styles1 = await page.locator('#email').getAttribute('style')
- const styles2 = await page.locator('#password').getAttribute('style')
  expect(styles1 || '').not.toContain('data:image/svg+xml;base64,')
- expect(styles2 || '').toContain(constants.iconMatchers.key)
+ await this.passwordFieldShowsKey()
  }
  /**
  * @param {string} username
@@ -646,7 +678,7 @@
  expect(input).toHaveAttribute(ATTR_AUTOFILL, 'true')
  }
  async assertDaxIconIsHidden ({ checking = 'autofill' } = {}) {
- const input = await page.locator(selectors.identity)
+ const input = await page.getByLabel('Email')
  if (checking === 'style') {
  const style = await input.getAttribute('style')
  expect(style).toBeFalsy()

diff --git a/integration-test/pages/mutating-form.html b/integration-test/pages/mutating-form.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width">
+ <title>Mutating form</title>
+<!-- <link rel="stylesheet" href="./style.css" />-->
+ <style>
+ body {
+ font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
+ "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+ padding: 1em;
+ }
+
+ .dialog {
+ max-width: 500px;
+ height: auto;
+ padding: 30px;
+ background-color: #fefefe;
+ border-radius: 4px;
+ border: 0.5px solid #999;
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
+ text-align: center;
+ }
+
+ hr {
+ margin: 2em auto;
+ }
+
+ fieldset {
+ display: grid;
+ grid-template-columns: max-content 1fr;
+ grid-gap: 1em;
+ max-width: 410px;
+ padding: 0;
+ border: none;
+ margin: auto;
+ }
+
+ label {
+ align-self: center;
+ text-align: right;
+ }
+
+ input,
+ button,
+ .button {
+ font-family: inherit;
+ font-size: 16px;
+ line-height: 24px;
+ }
+
+ input {
+ grid-column: span 2;
+ margin: auto;
+ }
+
+ button,
+ .button {
+ grid-column: span 2;
+ display: block;
+ margin: auto;
+ padding: 5px 20px;
+ background-color: black;
+ color: white;
+ font-weight: bold;
+ border-radius: 3px;
+ border: none;
+ appearance: none;
+ box-shadow: none;
+ }
+
+ .button-with-child {
+ position: relative;
+ width: 250px;
+ height: 40px;
+ }
+
+ .button-with-child i {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+ }
+
+ button[type="button"] {
+ display: inline-block;
+ padding: 0;
+ background: none;
+ color: black;
+ }
+ </style>
+</head>
+
+<body>
+<main>
+
+<p><a href="../index.html">[Home]</a></p>
+
+<p id="demo"></p>
+
+<div class="dialog">
+ <form action="/signup" id="signup-login">
+ <h2>Sign up for our services</h2>
+ <fieldset>
+ <input id="email" type="email" placeholder="Email">
+ <input id="firstname" type="text" placeholder="First name">
+ <input id="lastname" type="text" placeholder="Last name">
+ <input id="password" type="password" passwordrules="minlength: 5; maxlength: 10" placeholder="Password">
+ <input id="password-2" type="password" passwordrules="minlength: 5; maxlength: 10" placeholder="Repeat password">
+ <button type="submit">Sign up</button>
+ </fieldset>
+ <p><button id="toggle-login-signup" type="button">Login instead</button></p>
+ </form>
+</div>
+</main>
+<script type="module">
+ const form = document.forms['signup-login'];
+ form.addEventListener("submit", (e) => {
+ e.preventDefault();
+ })
+</script>
+<script>
+ const form = document.forms['signup-login'];
+ const toggle = document.getElementById('toggle-login-signup')
+ const submit = document.querySelector('button[type=submit]')
+ const title = document.querySelector('h2')
+ toggle.addEventListener('click', () => {
+ if (form.action.includes('signup')) {
+ setLogin()
+ } else {
+ setSignup()
+ }
+ })
+ let elsToRemove
+ function setLogin () {
+ title.textContent = 'Login now!'
+ submit.textContent = 'Login'
+ toggle.textContent = 'Signup here'
+ elsToRemove = document.querySelectorAll('#firstname, #lastname, #password-2')
+ elsToRemove.forEach(el => el.remove())
+
+ form.action = '/login'
+ }
+ function setSignup () {
+ title.textContent = 'Sign up for our services'
+ submit.textContent = 'Signup'
+ toggle.textContent = 'Login instead'
+ form.append(...elsToRemove)
+ form.action = '/signup'
+ }
+</script>
+</body>
+
+</html>
diff --git a/integration-test/tests/mutating-form.macos.spec.js b/integration-test/tests/mutating-form.macos.spec.js
@@ -0,0 +1,36 @@
+import {createAutofillScript, forwardConsoleMessages} from '../helpers/harness.js'
+import {createWebkitMocks, macosContentScopeReplacements} from '../helpers/mocks.webkit.js'
+import {mutatingFormPage} from '../helpers/pages.js'
+import {test as base} from '@playwright/test'
+
+/**
+ * Tests for various auto-fill scenarios on macos
+ */
+const test = base.extend({})
+
+test.describe('Mutating form page', () => {
+ async function applyScript (page) {
+ await createAutofillScript()
+ .replaceAll(macosContentScopeReplacements())
+ .platform('macos')
+ .applyTo(page)
+ }
+
+ test('works fine on macOS', async ({page}) => {
+ // enable in-terminal exceptions
+ await forwardConsoleMessages(page)
+ await createWebkitMocks().applyTo(page)
+
+ // Load the autofill.js script with replacements
+ await await applyScript(page)
+
+ const mutatingForm = mutatingFormPage(page)
+ await mutatingForm.navigate()
+
+ await mutatingForm.passwordFieldShowsKey()
+
+ await mutatingForm.toggleLoginOrSignup()
+
+ await mutatingForm.assertPasswordHasNoIcon()
+ })
+})