0

Since the Pinterest API is down, I am trying to write a CEFSharp app. to login and pin to my boards manually. Here is the Pinterest form html.

<form data-test-id="registerForm" method="POST" novalidate=""><div data-test-id="emailInputField" class="zI7 iyn Hsu"><fieldset style="position: relative; margin-bottom: 7px;"><span><input aria-invalid="false" autocomplete="username" class="wyq Hsu tBJ dyH iFc yTZ L4E unP iyn Pve pBj qJc aKM xD4" id="email" name="id" placeholder="Email" type="email" value=""></span></fieldset></div><div data-test-id="passwordInputField" class="zI7 iyn Hsu"><fieldset style="position: relative;"><span><input aria-invalid="false" autocomplete="new-password" class="wyq Hsu tBJ dyH iFc yTZ L4E unP iyn Pve pBj qJc aKM xD4" id="password" name="password" placeholder="Password" type="password" value=""></span></fieldset></div><div style="float: left; margin-bottom: 12px; margin-top: 8px;"><a href="/password/reset/" style="color: rgb(51, 51, 51); font-size: 14px; font-weight: bold;">Forgot your password?</a></div><div id="recaptcha_placeholder_1" class="g-recaptcha" style="margin-top: 16px; transform: scale(0.88); transform-origin: 0px 0px 0px;"></div><div data-test-id="registerFormSubmitButton"><button aria-label="" class="red SignupButton active" type="submit" style="border: 0px; height: 36px; display: inline-block; border-radius: 20px; -webkit-font-smoothing: antialiased; padding: 0px 18px; font-size: 15px; font-weight: bold; outline: none; box-shadow: none; cursor: pointer; margin-top: 10px; vertical-align: middle; text-align: center; background-color: rgb(230, 0, 35); color: rgb(255, 255, 255); width: 100%;"><div>Log in</div></button></div></form>

I put the code below in the JQuery section of JFiddle to test the code and it sets the 2 inputs. So I'm stumped why CEFSharp can't set those imputs. I'm also in need of how to write the code to click the Submit button but one step at a time.

Given the form html above running these 2 lines of code below in the test app called JFiddle sets the 2 input fields successfully.

$('input[name=id]').val('john@mydomain.com');
$('input[name=password]').val('pinterestpassword');

Doing the same thing using a CefSharp App, fails to set the 2 input fieds.

chromeBrowser = new ChromiumWebBrowser("https://www.pinterest.com/login");
chromeBrowser.LoadingStateChanged += chromeBrowser_LoadingStateChanged;

private void chromeBrowser_LoadingStateChanged(object sender, LoadingStateChangedEventArgs la)
{
     if(la.IsLoading == false)
     {
        // does not set the 2 input fields

        chromeBrowser.ExecuteScriptAsync("$('input[name=id]').val('john@mydomain.com')");
        chromeBrowser.ExecuteScriptAsync("$('input[name=password]').val('pinterestpassword')");

        // tried the code below also but it doesn't work either

        //chromeBrowser.ExecuteScriptAsync("$('input[name=id]').val(\"john@mydomain.com\")");
        //chromeBrowser.ExecuteScriptAsync("$('input[name=password]').val(\"pinterestpassword\")");
     }
}
GRF
  • 171
  • 2
  • 10
  • Use `DevTools` to debug javascript. See https://github.com/cefsharp/CefSharp/wiki/Trouble-Shooting#javascript-debugging Is your html in the main frame? – amaitland Mar 25 '20 at 23:21
  • Good question. I don't think it's in the main frame. In the chrome browser window I clicked on the "View page source" context menu and just looked at the form code to find the inputs. The page url is https://www.pinterest.com/login. How can I find out the mail frame and change the code accordingly? – GRF Mar 25 '20 at 23:31
  • Are you sure the page has jQuery? Revert to using vanilla javascript – amaitland Mar 26 '20 at 01:52
  • I tried this code and still no luck. chromeBrowser.ExecuteScriptAsync("document.getElementByName('id').value='greatrecipes@mydomain.com'"); chromeBrowser.ExecuteScriptAsync("document.getElementByName('password').value='_P#AYdmKSPsss'"); – GRF Mar 26 '20 at 04:16
  • Have you opened DevTools and run your script? In this case you can run it in Chrome, shouldn't make any difference. Name is not a unique property, as a result `getElementByName` returns a `NodeList`, have a read of https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName Make sure your script runs in `Chrome DevTools` before attempting to run it using `CefSharp`. – amaitland Mar 26 '20 at 04:32
  • Here is the entire test done on JFiddle with the entire html contained in pinterest.com/login page, and the JQuery code works, but just won't work in CefSharp. Here is the test link https://jsfiddle.net/glennf/ps1v8dzw/4/ – GRF Mar 26 '20 at 04:40
  • Your right. I went to DevTools and entered this snippet and ran it and didn't work. document.getElementByName('id').value= 'sales@mydomain.com' – GRF Mar 26 '20 at 05:17
  • I got it to set the values for the email and password using the code below, but when I click the login button, it gives me an error and have to type the values in. It seems if I manually left click the inputs, enter the values and press the click button it works. So I tried calling the click() method to simulate clicking on but it doesn't work. Any ideas? chromeBrowser.ExecuteScriptAsync("document.getElementById('email').value='greatrecipes@health.com'"); chromeBrowser.ExecuteScriptAsync("document.getElementById('password').value='_P#AYdmKSPth'"); – GRF Mar 26 '20 at 06:13
  • This really isn't a CefSharp problem, you should add the JavaScript tag and edit your original question to get help from a broader audience. Validating key presses is pretty common, you can try https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically – amaitland Mar 26 '20 at 23:43

0 Answers0