difference between "run |" and multiple runs in github actions - github-actions

Question

what is the difference between
steps:
- name: npm install, build, and test
run: |
npm ci
npm run build --if-present
npm test
and
steps:
- name: npm install, build, and test
- run: npm ci
- run: npm run build --if-present
- run: npm test
in github actions?
I tried to read the documentation on steps but it does not mention anything like that

Answer 1

Difference is that first example is executed as single script with three commands, and second example is executed as three different one-line scripts (side note: second example is invalid, as you use step with name without run, i'll ignore that line).
Let's assume for a second that npm does not create any output when running. In first example, if one of commands fails, it might be a problem to identify which one - you have only one step marked as failed. In second example, you'll know exactly where the problem is, as each command is its own step.
Let's assume for a second that npm needs to be run in specific subdirectory. We need to remember that each steps always starts in workspace directory / repo's root directory, so we need enter directory where our stuff is first.
- run: |
cd my/directory
npm ci
npm run build --if-present
npm test
- run: npm ci
working-directory: my/directory
- run: npm run build --if-present
working-directory: my/directory
- run: npm test
working-directory: my/directory
OR
- run: cd my/directory && npm ci
- run: cd my/directory && npm run build --if-present
- run: cd my/directory && npm test
Let's assume for a second npm test needs to be run only on push event, but workflow is configured to run on: [push, pull_request]
- run: |
npm ci
npm run build --if-present
if [ "${{ github.event_name }}" == "push" ]; then
npm test
fi
shell: bash
- run: npm ci
- run: npm run build --if-present
- run: npm test
if: github.event_name == 'push'
Under Actions tab, when processing pull_request event, second example will be displayed as...
- Run npm ci
- Run npm run build...
- Run npm test <-- this one will be grayed out
...and you need only a quick look to see that npm test step is skipped. In first example you'll have to expand step first and inspect log to notice any difference.
And so on, and so on, there's dozens of scenarios when it's easier/better to use all-in-one step, and as much scenarios when command-by-command steps are the way to go; it's up to you to decide which one fits you best.
At the end of the day, both examples do exactly same thing, after all. But if anything goes wrong along the way, picking one way to run commands over another (which also changes how they're displayed) can make a difference how long it gonna take to prepare a fix.

Answer 2

run: | is executed as a single-line script with the commands you mentioned.
Example:
run: Each command will be executed as a one-line script.