w3 schools JS compiler: <iframe> not so easy to access for [jq

frankcollins3 commented 1 year ago

Screen Shot 2023-05-15 at 12 13 25 PM

take this code here:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://www.w3schools.com/tryit/tryit.asp?filename=tryhtml_hello');

  // Switch to the iframe that contains the code editor
  const iframe = await page.frames()[1];

  // Insert the desired code into the editor
  await iframe.type('#textareaCode', `
    <!DOCTYPE html>
    <html>
    <body>

    <h1 style="background-color: red;">Hello World!</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>

    <script>
      **alert('hey');**
    </script>
  `);

  await browser.close();
})();

the invocation of alert('hey') is supposedly the code that could bypass the need for a C/python prompt. C isn't built with browser in mind so doesn't have those properties/methods built in. With puppeteer, I realized if we could take input on whatever text would go into the alert() method:

We could essentially built a very basic Pomodoro-Session app that would receive user-specified input on: 1) how long the session will be 2) any key concepts or learnings worth storing to a db or other method of saving data. storing data could be facilitated:

perhaps by more puppeteer automation: open a google email draft or google drive draft and continue updating text.
- postgres DB, but would rather not use DB.
- - .PDF file export or worst case update a .md or .txt file by accessing the path [/Users/user/Desktop/file]

first proposed approach: find the id or class of [run] to target with .click()

Screen Shot 2023-05-15 at 12 47 55 PM

Screen Shot 2023-05-15 at 12 49 11 PM

found the button: Screen Shot 2023-05-15 at 12 52 43 PM

[12:53pm]

frankcollins3 commented 1 year ago

puppeteer: (GraphQL RootQueryType key) Screen Shot 2023-05-15 at 1 30 14 PM

{message: 'Navigation timeout of 30000 ms exceeded',

this looks to be the error blocking the running of code.

[1:31pm]

frankcollins3 commented 1 year ago

proposed approach:

Screen Shot 2023-05-15 at 1 40 34 PM

Screen Shot 2023-05-15 at 2 39 57 PM

separate concerns and step away from the aspect of the w3school compiler. Make alert.html file Create <div> to read & write to and a users/desktop path for puppeteer</p> <p>[2:34pm]</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/frankcollins3"><img src="https://avatars.githubusercontent.com/u/73137934?v=4" />frankcollins3</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>I made a local file to separate concerns of puppeteer running a javascript console (like w3schools') that has quirks that make it hard to target by conventional id or class targeting.</p> <p>while I don't have a console implemented, we can facilitate the alert without the console, by interacting with DOM</p> <p>[2:49pm]</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/frankcollins3"><img src="https://avatars.githubusercontent.com/u/73137934?v=4" />frankcollins3</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p><strong>what is happening is: file:///Users/medium/Desktop/alert.html</strong> <img src="https://github.com/frankcollins3/Node-Alerts/assets/73137934/5d2f8770-6102-4fd0-9d5e-70d3f7594c07" alt="Screen Shot 2023-05-15 at 2 52 00 PM" /></p> <pre><code> <body> <div id="writing-board"> </div> <script src="" async defer></script> </body> </html></code></pre> <p><strong> <div id="writing-board"> </strong> // this element from /Desktop/alert.html</p> <p><strong>file:///Users/medium/Desktop/pokemonGO/client/src/components/element/RealScreen.js</strong> 1) has string data appended through a clientside invocation of fetch() which accesses a GraphQL endpoint @: <strong>file:///Users/medium/Desktop/pokemonGO/server/index.js</strong> </p> <p>this endpoint houses a resolve function and this block of code:</p> <pre><code> let promises = [ puppeteer.launch({headless: false}).then(async(browser) => { let promises = [ puppeteer.launch({headless: false}).then(async (browser) => { const page = await browser.newPage(); await page.goto('file:///Users/medium/Desktop/alert.html'); // Write HTML code to the #writing-board element **await page.evaluate(() => { const writingBoard = document.querySelector('#writing-board'); writingBoard.innerHTML = '<h1>Here is my alert</h1>'; });** // await browser.close(); }) ]; await Promise.all(promises); })</code></pre> <p>page.evaluate() => function through which DOM elements may be targeted, and mutated/manipulated.</p> <p>In this example</p> <p>document.querySelector('#writing-board') is reaching into that Desktop/alert.html file and writing to</p> <body> <div id="writing-board> </div> </body> <p>In doing so we can create a link to write alerts in Node.js. </p> <p>[3:00pm]</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

frankcollins3 / Node-Alerts

w3 schools JS compiler: <iframe> not so easy to access for [jq | js] targeting [12:29pm] #2