Skip to content

Capture time to load users/ page 40 times using Puppeteer (with caching) #320

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: development
Choose a base branch
from

Conversation

AllisonBC
Copy link
Contributor

@AllisonBC AllisonBC commented Mar 25, 2021

Closes #301

What it does:
Uses Puppeteer to load users/ page, timing the duration and taking a screenshot for each request.

To Test:

  1. Checkout this PR
  2. Open /test/ui in the integrated terminal
  3. Run node load40-cache-on.js
  4. Results:
  • You should see console log with times and screenshot creation confirmations:
    PS C:\Users\allyb\AndroidStudioProjects\ad440-ds-practicum\ad440-winter2021-thursday-repo\test\ui> node load40-cache-on.js
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #0,
      Time to load page: 0.071803,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14912.085675.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #1,
      Time to load page: 0.118419,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14912.406923.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #2,
      Time to load page: 0.148331,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14912.741365.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #3,
      Time to load page: 0.176021,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14913.059221.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #4,
      Time to load page: 0.202767,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14913.373479.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #5,
      Time to load page: 0.229653,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14913.711231.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #6,
      Time to load page: 0.257742,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14914.059247.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #7,
      Time to load page: 0.285181,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14914.374034.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #8,
      Time to load page: 0.313073,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14914.690814.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #9,
      Time to load page: 0.340975,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14915.008987.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #10,
      Time to load page: 0.366574,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14915.321106.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #11,
      Time to load page: 0.395843,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14915.640799.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #12,
      Time to load page: 0.422928,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14915.954368.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #13,
      Time to load page: 0.450579,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14916.28428.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #14,
      Time to load page: 0.478141,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14916.592429.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #15,
      Time to load page: 0.506213,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14916.913476.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #16,
      Time to load page: 0.533688,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14917.222729.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #17,
      Time to load page: 0.617864,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14917.554009.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #18,
      Time to load page: 0.688697,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14917.876165.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #19,
      Time to load page: 0.730482,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14918.182548.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #20,
      Time to load page: 0.771454,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14918.480242.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #21,
      Time to load page: 0.812978,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14918.779071.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #22,
      Time to load page: 0.856697,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14919.077211.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #23,
      Time to load page: 0.900054,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14919.381065.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #24,
      Time to load page: 0.95061,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14919.68505.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #25,
      Time to load page: 0.993158,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14919.993908.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #26,
      Time to load page: 1.034062,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14920.305239.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #27,
      Time to load page: 1.076081,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14920.627303.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #28,
      Time to load page: 1.118026,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14920.926035.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #29,
      Time to load page: 1.160103,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14921.231788.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #30,
      Time to load page: 1.212725,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14921.526784.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #31,
      Time to load page: 1.254808,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14921.826727.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #32,
      Time to load page: 1.295336,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14922.142543.png
https://nsc-thursday-react-app.azureedge.net/users-  
      Load time test: #33,
      Time to load page: 1.341216,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14922.469802.png
https://nsc-thursday-react-app.azureedge.net/users-
      Load time test: #34,
      Time to load page: 1.384407,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14922.774785.png
https://nsc-thursday-react-app.azureedge.net/users-
      Load time test: #35,
      Time to load page: 1.426253,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14923.079511.png
https://nsc-thursday-react-app.azureedge.net/users-
      Load time test: #36,
      Time to load page: 1.479234,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14923.378041.png
https://nsc-thursday-react-app.azureedge.net/users-
      Load time test: #37,
      Time to load page: 1.521505,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14923.677642.png
https://nsc-thursday-react-app.azureedge.net/users-
      Load time test: #38,
      Time to load page: 1.562225,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14923.992247.png
https://nsc-thursday-react-app.azureedge.net/users-
      Load time test: #39,
      Time to load page: 1.60458,
      Screenshot will be stored as: ../results/ui-test-results/users-load40_cache_on_14924.299498.png
  • 40 png files should appear in results/ui-test-results/users-load40-cache-on

Time Spent:

Date Activity Time
3/22 Research Puppeteer 2 hours
3/22 Develop test file 2 hours
3/24 Documentation 30 min

@AllisonBC AllisonBC added the team3 Issues for Practicum Team 3 label Mar 25, 2021
@AllisonBC AllisonBC added this to the Sprint 06 milestone Mar 25, 2021
@AllisonBC AllisonBC self-assigned this Mar 25, 2021
Copy link
Collaborator

@unicornsleuth unicornsleuth left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One small change should make this work correctly!

page.setCacheEnabled([true]);

for (let i = 0; i < testCount; ++i){
await page.goto(url);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some of your screenshots haven't loaded:
image
I found that changing the page.goto(url) to page.goto(url, waitUntil="networkidle2") fixed this - another option is "networkidle0" but I didn't find that to be necessary to get the loaded data.

const browser = await puppeteer.launch();

const page = await browser.newPage();
page.setCacheEnabled([true]);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My understanding is that we're not using browser caching, we're using the Redis caching - so I think you should have this set to False and then test it while CACHE_TOGGLE is set to "True" in the Azure function app. But I'm not sure - I'll approve if you get the screenshots to wait until after the page fully loads. : )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
team3 Issues for Practicum Team 3
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Capture time to load users/ page 40 times using Puppeteer (with caching)
2 participants