try to update nonce in out out frame when using new window (#15671)

* allow some pixels difference for usermanager tests

* try to update nonce in out out frame when using new window

* Ensure https warning is hidden in optout ui test

* adds UI test

4 files changed, 44 insertions, 1 deletions

diff --git a/tests/UI/expected-screenshots/OptOutForm_clicked_once.png b/tests/UI/expected-screenshots/OptOutForm_clicked_once.png
new file mode 100644
index 0000000000..b349e78513
--- /dev/null
+++ b/tests/UI/expected-screenshots/OptOutForm_clicked_once.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c2c658d66186e231303940ef50ba4a8cc982d28c0425e4290cb10ea3ea4e46d0
+size 22990
diff --git a/tests/UI/expected-screenshots/OptOutForm_clicked_twice.png b/tests/UI/expected-screenshots/OptOutForm_clicked_twice.png
new file mode 100644
index 0000000000..152f97f608
--- /dev/null
+++ b/tests/UI/expected-screenshots/OptOutForm_clicked_twice.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:375f8b477c06ee4477d7976f347dae645ea04a97c0acd21b9f154bd61edfc71b
+size 23291
diff --git a/tests/UI/expected-screenshots/OptOutForm_opted-out_reloaded.png b/tests/UI/expected-screenshots/OptOutForm_opted-out_reloaded.png
new file mode 100644
index 0000000000..152f97f608
--- /dev/null
+++ b/tests/UI/expected-screenshots/OptOutForm_opted-out_reloaded.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:375f8b477c06ee4477d7976f347dae645ea04a97c0acd21b9f154bd61edfc71b
+size 23291
diff --git a/tests/UI/specs/OptOutForm_spec.js b/tests/UI/specs/OptOutForm_spec.js
index 26fc7976a8..97f64d2885 100644
--- a/tests/UI/specs/OptOutForm_spec.js
+++ b/tests/UI/specs/OptOutForm_spec.js
@@ -15,6 +15,7 @@ describe("OptOutForm", function () {
     function expandIframe() {
         return page.evaluate(() => {
             const $iframe = $('iframe#optOutIframe');
+            $iframe.contents().find('#textError_https').hide();
             $iframe.width(350);
             $iframe.height($iframe.contents().outerHeight());
         });
@@ -44,6 +45,8 @@ describe("OptOutForm", function () {
         await page.waitFor(5000); // opt out iframe creates a new page, so we can't wait on it that easily
         await page.waitForNetworkIdle(); // safety
 
+        await expandIframe();
+
         const element = await page.jQuery('iframe#optOutIframe');
         expect(await element.screenshot()).to.matchImage('opted-out');
     });
@@ -55,7 +58,38 @@ describe("OptOutForm", function () {
         await expandIframe();
 
         const element = await page.jQuery('iframe#optOutIframe');
-        expect(await element.screenshot()).to.matchImage('opted-out');
+        expect(await element.screenshot()).to.matchImage('opted-out_reloaded');
+    });
+
+    it("using opt out twice should work correctly", async function () {
+        page.setUserAgent(chromeUserAgent);
+        await page.goto(siteUrl);
+
+        await page.evaluate(function () {
+            $('iframe#optOutIframe').contents().find('input#trackVisits').click();
+        });
+
+        await page.waitFor(5000);
+
+        await expandIframe();
+
+        // check the box has opted in state after clicking once
+        var element = await page.jQuery('iframe#optOutIframe');
+        expect(await element.screenshot()).to.matchImage('clicked_once');
+
+        await page.evaluate(function () {
+            $('iframe#optOutIframe').contents().find('input#trackVisits').click();
+        });
+
+        await page.waitFor(5000);
+
+        // check the box has outed out state after click another time
+        await page.reload();
+
+        await expandIframe();
+
+        var element = await page.jQuery('iframe#optOutIframe');
+        expect(await element.screenshot()).to.matchImage('clicked_twice');
     });
 
     it("should correctly show display opted-in form when cookies are cleared", async function () {