# This is a template for a Dockerfile used to run acts in Actor system.
# The base image name below is set during the act build, based on user settings.
# IMPORTANT: The base image must set a correct working directory, such as /usr/src/app or /home/user
FROM apify/actor-node-puppeteer-chrome:15-10.1.0

# Second, copy just package.json and package-lock.json since it should be
# the only file that affects "npm install" in the next step, to speed up the build
COPY package*.json ./

# Install NPM packages, skip optional and development dependencies to
# keep the image small. Avoid logging too much and print the dependency
# tree for debugging
RUN npm --quiet set progress=false \
 &amp;&amp; npm install --only=prod --no-optional \
 &amp;&amp; echo "Installed NPM packages:" \
 &amp;&amp; (npm list --all || true) \
 &amp;&amp; echo "Node.js version:" \
 &amp;&amp; node --version \
 &amp;&amp; echo "NPM version:" \
 &amp;&amp; npm --version

# Copy source code to container
# Do this in the last step, to have fast build if only the source code changed
COPY --chown=myuser:myuser . ./

# NOTE: The CMD is already defined by the base image.
# Uncomment this for local node inspector debugging:
# CMD [ "node", "--inspect=0.0.0.0:9229", "main.js" ]

Dockerfile

main.js

{
 "name": "apify-project",
 "version": "0.0.1",
 "description": "",
 "author": "It's not you it's me",
 "license": "ISC",
 "dependencies": {
 "apify": "1.3.4",
 "puppeteer": "10.1.0"
 },
 "scripts": {
 "start": "node main.js"
 }
}

package.json

# This is a template for a Dockerfile used to run acts in Actor system.
# The base image name below is set during the act build, based on user settings.
# IMPORTANT: The base image must set a correct working directory, such as /usr/src/app or /home/user
FROM apify/actor-node-puppeteer-chrome:15-10.1.0

# Second, copy just package.json and package-lock.json since it should be
# the only file that affects "npm install" in the next step, to speed up the build
COPY package*.json ./

# Install NPM packages, skip optional and development dependencies to
# keep the image small. Avoid logging too much and print the dependency
# tree for debugging
RUN npm --quiet set progress=false \
 && npm install --only=prod --no-optional \
 && echo "Installed NPM packages:" \
 && (npm list --all || true) \
 && echo "Node.js version:" \
 && node --version \
 && echo "NPM version:" \
 && npm --version

# Copy source code to container
# Do this in the last step, to have fast build if only the source code changed
COPY --chown=myuser:myuser . ./

# NOTE: The CMD is already defined by the base image.
# Uncomment this for local node inspector debugging:
# CMD [ "node", "--inspect=0.0.0.0:9229", "main.js" ]


apify-project

Example showing how to use headless Chromium with Puppeteer to open a web page, fetch the list of DOM nodes on the pages and obtain CSS styling information for each HTML element. The actor uses the Chrome DevTools Protocol to access the required browser functionality.

example-analyze-dom-css

Example of using headless Chromium with Puppeteer to open a web page, fetch the list of DOM nodes and obtain CSS styling information for each HTML element.

Webpage DOM & CSS Analyzer

Webpage DOM & CSS Analyzer · Apify

API · Webpage DOM & CSS Analyzer · Apify

Source code · Webpage DOM & CSS Analyzer · Apify

Related actors · Webpage DOM & CSS Analyzer · Apify

Example showing how to use headless Chromium with Puppeteer to open a web page, fetch the list of DOM nodes on the pages and obtain CSS styling information for each HTML element. The actor uses the...

Webpage DOM & CSS Analyzer

Industries

Where next?