Navigating iFrames using Phantomjs Watir

Trying to access a login page using my script:

Using PhantomJS and Watir.

The issue with the login page is that the login textfields are within an iFrame:

<iframe class="hiFrame" data-reactid=".0.0.0.1.0.1.0.0.$frame" src="https://instagram.com/accounts/login/ajax/?targetOrigin=https%3A%2F%2Finstagram.com" scrolling="no" seamless="">
  #document
  <!DOCTYPE html>
  <html class="hl-en not-logged-in " lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head></head>
    <body class="LoginFormChrome ">
      <div class="LoginFormPage" data-reactid=".0">
        <form data-reactid=".0.0">
          <p class="lfField" data-reactid=".0.0.0">
            <label class="lfFieldLabel" data-reactid=".0.0.0.0"></label>
            <input class="lfFieldInput" type="text" data-reactid=".0.0.0.1" value="" autocorrect="false" autocapitalize="false" maxlength="30" name="username"></input>
          </p>
          <p class="lfField" data-reactid=".0.0.1"></p>
          <p class="lfActions" data-reactid=".0.0.2"></p>
        </form>
      </div>
      <div id="fb-root" class=" fb_reset"></div>
    </body>
  </html>
</iframe>

Below is the Ruby code being used:

B.goto HOME_URL + LOGIN
sleep(5)            
puts B.iframe(:class => "hiFrame").text_field(:name => "username").exists?
B.iframe(:class => "hiFrame").text_field(:name => "username").set USERNAME
B.iframe(:class => "hiFrame").text_field(:name => "password").set PW
#puts B.iframe(:class => "hiFrame").text_field(:name => "username").exists?
B.iframe(:class => "hiFrame").button.click

Everything works fine with Firefox browser, but encountering issues with PhantomJS.

B.iframe(:class => "hiFrame").text_field(:name => "username").exists?

This line is causing the script to stop. "true" is returned for:

B.iframe(:class => "hiFrame").exists?

How can I successfully log in to instagram with PhantomJS and Watir?

Thank you.

Answer №1

To enhance your code's performance, consider including the following snippet before navigating to the page:

B = Watir::Browser.new :phantomjs
B.window.resize_to(800, 600)

By setting a window size, you can ensure seamless operation. Phantomjs typically requires a specified browser size for optimal functionality.

B.window.resize_to(800, 600)
B.goto HOME_URL + LOGIN
sleep(5)            
puts B.iframe(:class => "hiFrame").text_field(:name => "username").exists?
B.iframe(:class => "hiFrame").text_field(:name => "username").set USERNAME
B.iframe(:class => "hiFrame").text_field(:name => "password").set PW
#puts B.iframe(:class => "hiFrame").text_field(:name => "username").exists?
B.iframe(:class => "hiFrame").button.click

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for modifying the value of a JSON object using Javascript or Jquery

I am looking to retrieve the value of a specific key, potentially accessing nested values as well. For example, changing the value of "key1" to "value100" or "key11" to "value111. { "key1": "value1", "key2": "value2", ...

Ways to manually conceal a popover using Bootstrap 5

I am attempting to generate multiple Bootstrap popover instances that can all be closed with a single click. Here is the approach I took: document.addEventListener('DOMContentLoaded', function () { var items = []; document.getElementBy ...

What is the process for retrieving paginated data from the store or fetching new data from an API service within an Angular 2 application using ngrx-effects?

After coming across this insightful question and answer about the structure of paginated data in a redux store, I found myself pondering how to implement similar principles using ngrx/store in an angular 2 application. { entities: { users: { 1 ...

Why is it that my website in React crashes when I type rapidly in the TextField component?

Whenever I input text quickly into the TextField in my app, it causes my website to crash and display a blank white screen. Below is the snippet of code causing the problem: TextField Code: <TextField label="Item name" ...

Learn how to transform a raw readme file into an HTML formatted document using AngularJS, after retrieving it from GitHub

Can someone help me figure out how to format each line of the README.MD raw file into an HTML document using the controller below? angular.module('ExampleApp', []) .controller('ExampleController', function($scope, Slim,$sce) { ...

mentioning someone using the @ symbol

I am currently in the process of creating a tagging system for users. I have almost completed it, but there is one issue that I cannot seem to figure out. I know what the problem is, but I am struggling to come up with a solution. When I input the @ sign ...

Can you explain the mechanics behind Angular Component CSS encapsulation?

Is it possible to avoid CSS conflicts when using multiple style sheets? Consider Style 1: .heading { color: green; } And Style 2: .heading { color: blue; } If these two styles are applied in different views and rendered on a layout as a Partial Vi ...

Adding a dynamic form to each row in a table: A step-by-step guide

https://i.sstatic.net/HctnU.jpg Hey there! I'm facing a challenge with dynamically generated rows in a form. I want to send only the inputs from the selected row when a checkbox is clicked. Can you help me figure this out? I tried using let rowForm ...

Get the file using PhantomJS

When attempting to retrieve a file using PhantomJS, I encounter an issue where clicking the download link does not initiate any downloading. I have learned that PhantomJS does not support file downloads, but they are essential for my project. Can anyone pr ...

What is the best way to create a TypeScript function similar to a 'map' in React?

I recently started learning TS and am having trouble typing this arrow function: const mapLikeGet = (obj, key) => { if (Object.prototype.hasOwnProperty.call(obj, key)) return obj[key] } ...

Angular - Collaborative HTML format function

In my project, I have a function that sets the CSS class of an element dynamically. This function is used in different components where dynamic CSS needs to be applied. However, every time I make a change to the function, I have to update it in each compo ...

I'm looking to create an array of tags that contain various intersecting values within objectArray

Initially const array = [ { group: '1', tag: ['sins'] }, { group: '1', tag: ['sun'] }, { group: '2', tag: ['red'] }, { group: '2', tag: ['blue'] }, { grou ...

Delete one object and then sequentially rename all remaining objects

object This is the object I retrieved. How can I remove module_1 object and rename the module object? For example, remove module_1 and rename module_2, module_3... to module_1, module_2... `{ "module_1": { "modulename": "mat ...

Transform Json data from JavaScript format to a format that PHP can understand

I have a collection of json files that I need to parse and extract information from in order to store it in a database using PHP. The issue I'm encountering is that these json keys do not have quotes around them, like: [{f:{v:11,ib:5,gh:"res",bfr:7, ...

Check to see if there is a value present in a JavaScript array

I am trying to validate the content of the data array in the code below. My goal is to ensure that when a user enters a packageid (a variable in the code), and if that packageid does not exist, the "else" statement in the conditional should be triggered. ...

Click on ng-click to sort through the blog entries

Currently, I am in the process of developing a blog utilizing AngularJS and JSON. Nearly everything is functioning as expected except for one particular filter item. As I am relatively new to Angular, it presents a bit of a challenge for me. The issue ari ...

Obtain the value of an element from a React UI Material component (e.g. ListItemText)

Incorporated an onClick() event where a function is invoked to retrieve and display the value of any clicked element within the HTML body in a web component. <div id="root" onclick="handleClick(event)"></div> This snippet o ...

Utilizing React Custom Hooks for Firestore Data Retrieval

I recently developed a React custom hook that interfaces with a Firestore database. I followed the guidelines provided on the Firebase website, but I encountered an issue upon re-rendering the component. After refreshing my app, the useEffect hook function ...

Upcoming 13.4 Error: NEXT_REDIRECT detected in API routes

Here is the code snippet from my /app/api/auth/route.ts file: import { redirect } from 'next/navigation'; export async function GET(req: Request) { try { redirect('/dashboard'); } catch (error) { console.log(error); ...

Guide on utilizing multiple ng-apps alongside multiple controllers

Having trouble accessing controller values in different ng-apps? Here's a setup with two ng-apps and their controllers, where you may encounter errors when trying to access the value of one controller in another. Need some assistance with this issue. ...