Using Selenium webdriver to assign a JSON object to a paragraph element

What is the correct way to insert a JSON object into a p tag inside an iframe?

I attempted the following approach but it displayed the text "[object Object]" rather than the actual content of the object...

This is my implemented code:

var arrJSON = [
  {
    "list": [
      {
        "pageRequest": "http://www.tmz.com/",
        "fullRequest": "http://0914.global.ssl.fastly.net/ad/img/x.gif?cb=1487451360453",
        "method": "GET",
        "contentType": "image/gif",
        "queryString": "cb=1487451360453",
        "queryDelimiter": ""
      }
    ],
    "tagName": "DNStination Inc fastly.net",
    "regex": "((ht|f)tp(s?)://)?(.*)fastly.net/ad/img/x.gif(.*)",
    "domain": "fastly.net",
    "logoUrl": "https://logo.clearbit.com/fastly.net"
  },
  {
    "list": [
      {
        "pageRequest": "https://moz.com/",
        "fullRequest": "https://092-obr-737.mktoresp.com/webevents/visitWebPage?_mchNc=1487448129811&_mchCn=&_mchId=092-OBR-737&_mchTk=_mch-moz.com-1487448129792-38969&_mchHo=moz.com&_mchPo=&_mchRu=%2F&_mchPc=https%3A&_mchVr=151&_mchHa=&_mchRe=&_mchQp=",
        "method": "GET",
        "contentType": "image/gif",
        "queryString": "_mchNc=1487448129811&_mchCn=&_mchId=092-OBR-737&_mchTk=_mch-moz.com-1487448129792-38969&_mchHo=moz.com&_mchPo=&_mchRu=%2F&_mchPc=https%3A&_mchVr=151&_mchHa=&_mchRe=&_mchQp=",
        "queryDelimiter": "&"
      }
    ],
    "tagName": "Marketo, Inc mktoresp.com",
    "regex": "((ht|f)tp(s?)://)?(.*)mktoresp.com/webevents/visitWebPage(.*)",
    "domain": "mktoresp.com",
    "logoUrl": ""
  }
];
var webdriver = require('selenium-webdriver'),
chrome = require('selenium-webdriver/chrome');

const util = require('util');
    By = webdriver.By,
    until = webdriver.until;
var driver = new webdriver.Builder()
    .forBrowser('chrome')
    .build();

driver.get('https://my_site.com');
for(i=0; i<arrJSON.length; i++){
  driver.get('https://my_site.com/page');
  driver.wait(until.titleIs('Title'), 2000);
  var element = driver.findElement(By.css('option[value=\'Tags\']')).click();
  var string1 = JSON.stringify(arrJSON[i]);
  driver.executeScript('document.querySelectorAll(\'iframe\')[0].contentDocument.querySelector(\'p\').innerHTML = ' + string1);
  driver.sleep(2000);
}
javascriptjsonselenium

Answer №1

After encountering a similar issue, I came up with a quick solution that proved effective in my case. When dealing with nested objects, it is necessary to also JSON.stringify the inner objects. To achieve this, you should use 

JSON.stringify(JSON.stringify(arrJSON[i]))
or refer to the example below:

driver.get('https://my_site.com');
for(i=0; i<arrJSON.length; i++){
  driver.get('https://my_site.com/page');
  driver.wait(until.titleIs('Title'), 2000);
  var element = driver.findElement(By.css('option[value=\'Tags\']')).click();
  var string1 = JSON.stringify(arrJSON[i]);
  driver.executeScript('document.querySelectorAll(\'iframe\')[0].contentDocument.querySelector(\'p\').innerHTML = ' + JSON.stringify(string1));
  driver.sleep(2000);
}

Answer №2

One potential solution is to implement the code snippet below:

driver.executeScript('document.querySelectorAll(\'iframe\')[0].contentDocument.querySelector(\'p\').innerHTML = '" + string1 + "'");

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

Ensure to use e.preventDefault() method when handling form submissions

Check out this code snippet: <form> <input type="text" name="keyword" value="keyword"> <input type="submit" value="Search"> </form> I'm seeking assistance with implementing jQuery to prevent the default action of the submit b ...

javascriptjquery

Confirm that the form is valid prior to displaying the Bootstrap modal popup

My PHP file contains a simple form and a Bootstrap modal. When the submit button is clicked, the Bootstrap modal will be displayed. The form includes: https://i.sstatic.net/10R2r.png I want to validate the fields in the form. If successful, I then need ...

javascriptphpjqueryhtmlbootstrap-modal

Combining Laravel and VueJs for a Multi-Page Application (MPA)

I have recently developed a website using a combination of Laravel and VueJs. However, I am facing some confusion regarding the most suitable routing architecture to implement. Currently, my application has the following setup: The routing system is man ...

javascriptlaravelvue.js

Utilizing a npm module in a web browser following importing in Node.js

I recently installed an npm module, but I'm having trouble figuring out how to use it in the browser after importing it. First, I installed the npm module using the following command (using a dummy example module): npm install sample-module In my p ...

javascriptnode.jsnpm

The TypeScript Promise error codes TS2304 and TS2529 are causing confusion among

I came across the code below: function asyncTask(): Promise<string> { return new Promise<string>(resolve => resolve); } This code resulted in the following error: TS2304: cannot find name 'Promise' To address this issue, ...

javascripttypescriptpromise

Best practices for handling null variable assignment in DataWeave

Converting true/false JSON input to Y/N char output is the goal of this transformation. varOutput: ('Y' when payload.varInput otherwise 'N') However, what happens if varInput is null? An exception might occur. To handle this, we can a ...

jsonmuleintegrationtransformationdataweave

What is the method to open a link in a new tab on Internet Explorer using the Selenium WebDriver sampler in JMeter?

My code works perfectly in Chrome, but I encountered an issue when trying to open a link in a new tab using the Action class in IE browser. I have attempted various methods to resolve this issue, but I keep encountering the following error: Here is the c ...

seleniumjmeter

updating react state based on filtered redux properties

Just starting out with react & redux and running into some issues with filtering insights (articles, case studies, reports). My goal is to filter by industry, but I'm struggling to update the state with the filtered insights. InsightsPage.js con ...

javascriptreactjsreduxreact-redux

Step-by-step guide on accessing values from a JavaScript object

I have a dictionary variable declared within a script tag on an HTML page. My goal is to retrieve the values associated with the "Roads" and "Intersections" keys, which change each time the page is refreshed. By capturing these values, I can then use JavaS ...

javascripthtmljsondom-eventsjavascript-objects

What is the best way to merge angularjs modules?

In my angularjs application using the codeigniter PHP framework, I have implemented 3 modules - cars.js for car details, cellphones.js for cellphone details, and home.js for home details. Each module caters to a different client's needs. I am trying ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

Discovering elements through parent in Selenium

<div> <span>First line</span> <p>Second line</p> <span>Third line</span> <p>Fourth line</p> </div> My goal is to access the elements within the div tag using CSS or XPath selector ...

htmlseleniumselenium-webdrivercss-selectorsselenium-ide

Is it possible for links to remain clickable even if they pass underneath a div

I have implemented a shadow using a div element to cover some content beneath it. However, I am facing an issue where the div that is under the shadow cannot be interacted with. Is there any solution to this problem? Thank you ...

javascriptjquerycsshtml

Mobile page scroll appears to be disabled due to the Vue range slider

Within my VUE application, I've implemented a range slider component that allows users to view different values as they drag the slider. Everything seems to be functioning correctly, but I've encountered an issue where the mobile version of the p ...

javascriptvue.jsrangeslider

ERROR TRACKER: Unable to locate file "CL.exe". File not found in system

I am attempting to run the following command in a Node.js project on my Windows 8 machine: npm install [email protected] However, I am encountering an error that I am not sure how to resolve. TRACKER : error TRK0005: Failed to locate: "CL.exe". ...

javascriptnode.jswindowsnpmwindows-8

What is the best way to display a jQuery UI dialog when the page is reloaded?

I am trying to display a jQuery UI dialog when the user tries to reload or close the browser. Here is my code snippet: $(window).bind('beforeunload', function () { $("#confirm").dialog({ width: 500, modal: true, buttons: { ...

javascriptjquery

Guide to compressing JSON using GZIP on IIS6

JSON is not being gzipped on my website, even though it's added to the mime types and everything else is getting gzipped as expected. Webpagetest.org is giving me complaints about this issue. I have already restarted IIS. In my configuration file Met ...

jsongzipiis-6

Generate a loop specifically designed to execute the code following the menu in the script

My website has the code snippet below: let txt_com = document.querySelector(".text_user"); let num_com_user = document.querySelector(".massage_for_user"); txt_com.addEventListener("click", function() { if (this.classList.contains("num_com_user")) { ...

javascripthtmlcss

When the action "X" was executed, reducer "Y" resulted in an undefined value

I'm encountering an issue with Redux in React. Despite searching through related questions, I haven't found a solution that fits my specific case. Here are the files involved: Index.JS import snackbarContentReducer from '../src/shared/red ...

javascriptreactjsredux

Upon refreshing the datatable, I encountered a issue where the checkbox cannot be selected

After updating my data table with new content through an AJAX request, I am facing an issue where I am unable to select the check-boxes in the table. I use a class selector to choose the rows that contain multiple check-boxes. The select event is placed in ...

javascriptjqueryajax

Encountering a "Module not found" error when trying to integrate NextJs 13.4 with React Query and the

I encountered some issues while working on a NextJs application that utilizes App Router. The problem arose when we decided to switch from traditional fetching to using React Query in server components. To address this, I created a file called api.ts withi ...

javascriptnode.jsnext.js13daprapp-router