How to correctly implement step-by-step script execution (function by function)?

Question

JavaScript

I am implementing a screencast of working with an application in css and js on the site.
Question: How to correctly implement step-by-step script execution (function by function)?
For example, typing, then pressing a button, then the appearance of a new block with this text, etc. (under the hood it's just adding/removing classes, text or dom objects)
Perhaps there are better options besides setTimeout?

Answer 1

Optional
.animate() Callback Functions
Perform the next animation after the current complete

Answer 2

one . nightwatchjs.org
2. https://github.com/segmentio/nightmare